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

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

调用forceUpdate()在你的 onResize 方法中。有些人可能会试图争辩说，如果他们错误地阅读了 React 文档，那么设置状态优于 forcingUpdate，但只有当该状态是实际状态时才重要，并且如果实现了自定义的 shouldComponentUpdate 逻辑，则 setState 不保证重新渲染。当您特别想要在浏览器确定调整大小时重新渲染时，没有理由通过 UI 进行的 UI 修改使您的状态变得困惑:

onResize() {
   this.forceUpdate();
}