Question

我创建了一个包含一些图像的网格，并希望更新某些宽度上的列数。例如：

宽度＆gt; 960px：3列
宽度＆gt; 660px：2列
宽度＆lt; 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

解决问题的一个简单方法是在resize上添加一个事件列表器，或者只是使用一个普通的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()，但尽量避免使用

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

Answer 2

我建议使用CSS，它对我来说似乎更合适。重新渲染组件以做一些可以通过CSS中的媒体查询实现的东西是一种矫枉过正的恕我直言。

CSS：

//for medium screens
.container {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: auto;
    //for tiny screens
    @media screen and (max-width: 660px) {
        grid-template-rows: 1fr;
    }
    //for big screens
    @media screen and (min-width: 960px) {
        grid-template-rows: 1fr 1fr 1fr;
   }
}

在窗口调整大小时反应更新

2 个答案: