根据断点更改colspan

Question

我对React还是很陌生，我有一个表，当屏幕在某个断点以下时，我用CSS媒体查询隐藏了一些列。

@media screen and (max-width: 766px) {
.tdcel {
  display: none;
} 

但是，在同一表中，在下面的一行中，它的工作原理很好，我有一个使用colspan的单元格。显然，当我用CSS隐藏列时，我也需要减小colspan。

我有一个元素，它在单击时调用函数。我当时正在考虑对该功能添加某种检查，并可能对点击发生的行中的可见单元格进行计数。如果我使用的是jQuery，则可以执行以下操作：

$(".clickEm").click(function() {
     var ths = $(this),
         par = ths.closest("tr"),
         col = par.find("td:visible").length;

     par.next("tr td").attr("colspan", col); 
}

不幸的是，我仍在努力将自己的想法围绕React组件。有没有办法做到这一点？也许我想得太过分了。也许我可以根据视口大小获得条件colspan值？

<td colSpan={5}>

Answer 1

最简单的解决方案是使用css-grid或flexbox而不是表，因为这听起来像您在这里存在布局问题。这些纯粹是CSS解决方案。

但是，如果需要设置colspan来响应视口更改，则始终可以从窗口回调中调用react函数。

class MyComponent(props) extends React.Component {
  state = {
    colspan: 1
  };

  componentDidMount(){
    window.addEventListener('resize', this.resize);
  }
  componentWillUnmount(){
    window.removeEventListener('resize', this.resize);
  }
  resize(){
    // set the state of your component here:
    this.setState({
      colspan: // whatever
    });
  }
  render(){
    return (
      <Table>
         <tr>
            <td colSpan={this.state.colspan}>Blah blah blah</td>
         </tr>
      </Table>
    );
  }
}

您可能需要根据您的javascript变体或风格（打字稿，类等）更改语法。

反应组件类函数只是可以从其他函数（例如窗口事件）调用的常规函数​​。确保在卸载组件时删除该功能，否则可能会导致内存泄漏。

此外，不要忘记每帧可以多次调用诸如调整大小之类的窗口事件，而react可以批量处理渲染调用，因此请确保更新和渲染逻辑很简单。

或者，NPM上有一些响应组件可以为您响应窗口大小的变化。搜索npm反应可调整大小。