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

Question

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

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

我有一个包装器组件，它呈现另外两个组件，如下所示：

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

我尝试使用ref但它不适用于自定义组件（我得到了undefined），无论如何这看起来都是 react/redux 的反模式。

关于如何在不损害性能并尽可能接近 React/Redux 模式的情况下实现这一目标的任何建议？

Answer 1

反应。同步 2 个 div 或表格卷轴。没有状态、动作和第三方库。我的解决方案是：

const MyComponent = () => {
const firstDivRef = useRef();
const secondDivRef = useRef();

const handleScrollFirst = scroll => {
  secondDivRef.current.scrollTop = scroll.target.scrollTop;
};

const handleScrollSecond = scroll => {
  firstDivRef.current.scrollTop = scroll.target.scrollTop;
};

return (
<div>
  <div onScroll={handleScrollFirst} ref={firstDivRef}>
    The first div (or it can be tbody of a table and etc.)
  </div>

  <div onScroll={handleScrollSecond} ref={secondDivRef}>
    The second div
  </div>
</div>
);
};

如果没有一些样式，它就无法工作。请查看下面的完整版本以查看样式版本

现场演示： https://codesandbox.io/s/react-custom-scroll-sync-of-2-divs-10xpi

就是这样！:)

Answer 2

对于将来的类似问题，您可以查看：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 3

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

使用ref应该绝对有效，但请记住，它有时可能会返回，undefined至少直到安装发生为止，因此您需要简单地处理它尚不存在的情况。