Question

我正在使用react-grid-layout和react-custom-scrollbars来创建面板网格。这是代码的简化版本：

class GridLayoutWithScrollableItems extends React.Component {

    onResize() {
        this.setState({forceRenderAfterResize: Date.now()})
    }

    render() {
        return (
            <ReactGridLayout width={900} onResize={this.onResize.bind(this)}>
                <div key="a">
                    <Scrollbars>
                        <p>Lorem ipsum dolor ....</p>
                    </Scrollbars>
                </div>
                <div key="b">
                    <Scrollbars>
                        <p>Aenean purus magna ...</p>
                    </Scrollbars>
                </div>
            </ReactGridLayout>
        )
    }
}

按预期工作，除了调整大小：Scrollbars只会在重新渲染时更新其条形，这就是我设置虚拟状态变量forceRenderAfterResize的原因。

实现这一目标的最佳方法是什么？上面的解决方案感觉有点笨拙，并且还会重新渲染所有项目，而不仅仅是重新调整大小的项目。

Answer 1

在onResize方法中调用forceUpdate()。有些人可能会试图争论他们是否错误地读取了反应文档，设置状态比forcingUpdate更受欢迎，但只有在该状态是重要的实际状态时才会发生，并且setState不保证重新呈现如果自定义shouldComponentUpdate逻辑实现。当您特别想要在浏览器确定调整大小时重新渲染时，没有理由让您的状态混淆通过UI进行的UI修改：

onResize() {
   this.forceUpdate();
}

React-Grid-Layout：如何在调整大小时重新渲染项目

1 个答案: