1

我正在使用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。

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

4

1 回答 1

0

在 onResize 方法中调用forceUpdate() 。有些人可能会争辩说他们是否错误地阅读了 react 文档，设置状态优于强制更新，但只有当该状态是重要的实际状态时，如果自定义 shouldComponentUpdate 逻辑被实现，setState 不保证重新渲染. 当您特别想在浏览器确定调整大小时重新渲染时，没有理由对通过 UI 进行的 UI 修改混淆您的状态：

onResize() {
   this.forceUpdate();
}
于 2016-07-05T18:15:52.480 回答