Question

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

我不想使用状态和操作（我正在使用redux），因为它会因为重新渲染每个鼠标滚动而损害我的性能（我也尝试过去抖动/限制）。

我有一个包装器组件，它可以呈现其他两个组件：

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

我尝试使用ref，但它不适用于自定义组件（我得到undefined），无论如何，这看起来像反应/减少的反模式。< / p>

有关如何在不损害性能且尽可能接近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>

Answer 2

不幸的是，React除了参考之外没有一个很好的DOM操作解决方案，而且你绝对没有想要在每个事件发生后引发重新渲染。

使用ref应该绝对有效，但请记住，它有时可能会返回undefined至少直到挂载发生，所以你需要简单地处理它没有的情况＆＃ 39; t存在。

Answer 3

我最近创建了this library，可以解决您的问题

您需要做的只是

将<ScrollSync>设为要与其他节点同步滚动的节点的公共父节点（这是使用React新的Context API的React组件）
然后用<ScrollSyncNode>

然后发生同步：D

检查this codesandbox

在不使用状态和操作的情况下同步两个反应组件的滚动

3 个答案: