javascript - 在不使用状态和 Action 的情况下同步两个 react 组件的滚动

Question

我正在尝试同步 React 中两个不同组件的滚动，这样如果我在一个组件中滚动一个组件，另一个组件也会滚动。两者的比例不同，所以我每次都必须计算偏移量。

我不想使用状态和 Action (我正在使用 redux)，因为它会因为重新渲染每个鼠标滚动而损害我的性能(我也尝试过去抖动/节流)。

我有一个包装器组件，它像这样呈现另外两个组件:

class Wrapper extends React.Component {
  render() {
    return (
      <div>
        <FirstComponent />
        <SecondComponent />
      </div>
    );
  }
}

我尝试使用 ref 但它不适用于自定义组件(我得到 undefined)并且在任何情况下这一切看起来都像是 react 的反模式/redux.

关于如何在不影响性能并尽可能接近 React/Redux 模式的情况下实现这一点有什么建议吗？

Answer 1

以后类似问题可以看: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>