javascript - 如何在分辨率更改时重置网格分页内容？

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
    });
  }
}