如何在分辨率变化时重置网格分页内容？

Question

我使用了BootStrap中的网格模板，并根据附加图像显示该网格的分页1.现在，当我更改浏览器的屏幕分辨率时，分页内容会根据附加图像2分为两行一行。

但是一旦我刷新了页面，它就会正确地加载分页作为图像3.但我想在更改分辨率后立即获得该内容。

下面是通过对该分页类使用React的JS代码 var ul = React.DOM.ul（{className：'pagination pagination-sm'，role：'menubar'，'aria-label'：globalizationFactory.translate（'STORMS_PAGER'），key：'pager_container'}，[firstLi， prevLi，this.getPages（currentPageIndex + 1，totalPages），nextLi，lastLi]）;

        var mainClass = this.props.className ? 'container-fluid ' + this.props.className : 'container-fluid';
        return React.DOM.div({className: mainClass,key: 'pager_wrapper'},
          React.DOM.div({className: 'row',key: 'pager_wrapper_inner'},
            React.DOM.div({className: 'col-sm-12', style: {textAlign: 'center'},key: 'pager_innerWrapper'}, ul)));

任何建议都会有所帮助。

图片1： 图2：

图3：

Answer 1

我认为您需要做的就是侦听窗口调整大小事件并触发渲染。在React中，如果更改状态，则组件将呈现。您可以在正在进行渲染的组件内执行类似的操作。

getInitialState: function() {
  return {
    windowWidth: window.innerWidth,
    windowHeight: window.innerHeight
  };
},
componentDidMount: function() {
  return window.addEventListener('resize', this._handleResize);
},
componentWillUnmount: function() {
  return window.removeEventListener('resize', this._handleResize);
},
_handleResize: function() {
  if (this.state.windowWidth !== window.innerWidth || this.state.windowHeight !== window.innerHeight) {
    return this.setState({
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight
    });
  }
}