javascript - 对窗口大小调整进行 react 更新

Question

我创建了一个包含一些图像的网格，并且想要更新某些宽度的列数。例如:

• 宽度 > 960 像素:3 列
• 宽度 > 660px:2 列<​​/li>
• 宽度 < 660px:1 列

我创建了一个函数来更新行数，但是如何在不按 F5 的情况下重新呈现网格？

我的状态:

this.state = {
  numberOfColumns: 3,
  breakpointSm: 660px,
  breakpointMd: 960px,
};

我的功能:

getNumberOfColumns(){
  let smallDevices = window.matchMedia( "(max-width: " + this.state.breakpointSm + ")" );
  let mediumDevices = window.matchMedia( "(max-width:" + this.state.breakpointMd + ")" );
  let columns;

  if (smallDevices.matches) {
    columns = 1;
  } else if (mediumDevices.matches){
    columns = 2;
  } else {
    columns = 3;
  }
  this.setState({
    numberOfColumns: columns
  });
}

组件将安装:

componentWillMount() {
  this.getNumberOfColumns();
}

Answer 1

解决这个问题的一个简单方法是在调整大小时添加一个事件监听器，或者简单地使用一个普通的 CSS，这段代码实际上做的是在每次窗口大小改变时强制重新渲染

    getNumberOfColumns() {
        let columns;
        if(window.innerWidth === this.state.breakpointSm) {
          columns = 1;
        } else if(window.innerWidth === this.state.breakpointMd) {
         columns = 2;

        }else{
       columns = 3;
             }
         this.setState({
             numberOfColumns: columns
                    });
      }


componentDidMount() {
  this.getNumberOfColumns();
window.addEventListener("resize", this.getNumberOfColumns.bind(this));
}

 componentWillUnmount() {
    window.removeEventListener("resize", this.getNumberOfColumns.bind(this));
  }

在最坏的情况下，如果没有任何效果，您可以使用 this.forceUpdate() 但尽量避免它

我还没有测试过，但我希望这会有所帮助