我正在尝试同步 React 中两个不同组件的滚动,这样如果我在一个组件中滚动一个组件,另一个组件也会滚动。两者的比例不同,所以我每次都必须计算偏移量。
我不想使用状态和 Action (我正在使用 redux),因为它会因为重新渲染每个鼠标滚动而损害我的性能(我也尝试过去抖动/节流)。
我有一个包装器组件,它像这样呈现另外两个组件:
class Wrapper extends React.Component {
render() {
return (
<div>
<FirstComponent />
<SecondComponent />
</div>
);
}
}
我尝试使用 ref
但它不适用于自定义组件(我得到 undefined
)并且在任何情况下这一切看起来都像是 react 的反模式/redux.
关于如何在不影响性能并尽可能接近 React/Redux 模式的情况下实现这一点有什么建议吗?
最佳答案
以后类似问题可以看:react-scroll-sync ,这节省了我处理非常复杂的表同步案例的工作。
如何使用的简短示例:
<ScrollSync>
<div style={{ display: 'flex', position: 'relative', height: 300 }}>
<ScrollSyncPane>
<div style={{overflow: 'auto'}}>
<section style={{ height: 500 }}>
<h1>Left Pane Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
dolorum
est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
possimus quasi rerum sed soluta veritatis.</p>
</section>
</div>
</ScrollSyncPane>
<ScrollSyncPane>
<div style={{overflow: 'auto'}}>
<section style={{ height: 1000 }}>
<h1>Middle Pane Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
dolorum
est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
possimus quasi rerum sed soluta veritatis.</p>
</section>
</div>
</ScrollSyncPane>
</div>
</ScrollSync>
关于javascript - 在不使用状态和 Action 的情况下同步两个 react 组件的滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41290824/