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

Question

I am using react-grid-layout and react-custom-scrollbars to create a grid of panels. Here's a simplifed version of the code:

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

Works as expected except resizing: Scrollbars will only update its bars when it is re-rendered which is why I am setting that dummy state variable forceRenderAfterResize .

What would be the best way to achieve this? The solution above feels a bit clumsy and will also re-render all items instead of just the one that was resized.

Answer 1

Call forceUpdate() in your onResize method. Some might try to argue if they've read the react docs incorrectly, that setting state is preferred over forcingUpdate, but that's only when that state is actual state that matters, and setState does not guarantee a re-render if custom shouldComponentUpdate logic is implemented. No reason to muddy your state over UI modifications made via the UI, when you specifically want to re-render if the browser determines a resize:

onResize() {
   this.forceUpdate();
}