如何将JS代码迁移至ReactJS并调用？同步横向滚动函数迁移咨询

嘿，别担心新手问题，谁都是这么过来的😉！我帮你把这段Angular里的横向滚动同步逻辑改成React版本，而且完全遵循React的最佳实践——避免直接操作DOM，用React的钩子来实现更优雅的组件化方案。

核心思路 #

React中我们不会像原生JS那样直接用document.getElementById查询DOM，而是用useRef获取元素引用；同时用useEffect来管理滚动事件的监听和移除，防止内存泄漏。滚动同步的核心逻辑（加锁避免循环触发）和你原来的代码保持一致。

完整代码示例 #

下面是一个可直接使用的函数组件：

import { useRef, useEffect } from 'react';

function SyncHorizontalScroll() {
  // 用useRef获取两个滚动div的DOM引用
  const topDivRef = useRef(null);
  const botDivRef = useRef(null);

  // 滚动同步锁，防止两个滚动事件互相触发导致循环
  let isSyncingTop = false;
  let isSyncingBot = false;

  useEffect(() => {
    const topDiv = topDivRef.current;
    const botDiv = botDivRef.current;

    // 如果元素还没挂载，直接返回
    if (!topDiv || !botDiv) return;

    // 顶部div滚动时，同步底部div的scrollLeft
    const handleTopScroll = () => {
      if (!isSyncingTop) {
        isSyncingBot = true;
        botDiv.scrollLeft = topDiv.scrollLeft;
        // 用setTimeout确保浏览器完成滚动渲染后再解锁
        setTimeout(() => {
          isSyncingBot = false;
        }, 0);
      }
    };

    // 底部div滚动时，同步顶部div的scrollLeft
    const handleBotScroll = () => {
      if (!isSyncingBot) {
        isSyncingTop = true;
        topDiv.scrollLeft = botDiv.scrollLeft;
        setTimeout(() => {
          isSyncingTop = false;
        }, 0);
      }
    };

    // 添加滚动事件监听
    topDiv.addEventListener('scroll', handleTopScroll);
    botDiv.addEventListener('scroll', handleBotScroll);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      topDiv.removeEventListener('scroll', handleTopScroll);
      botDiv.removeEventListener('scroll', handleBotScroll);
    };
  }, []); // 空依赖数组，确保只在组件挂载/卸载时执行一次

  return (
    <div style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}>
      <div
        ref={topDivRef}
        id="top"
        style={{
          overflowX: 'auto',
          border: '1px solid #ddd',
          padding: '8px'
        }}
      >
        {/* 这里替换成你自己的顶部内容，需要足够宽才能触发横向滚动 */}
        <div style={{ width: '2000px', height: '80px', backgroundColor: '#f5f5f5' }}>
          顶部滚动区域：这里的内容足够长，会触发横向滚动 → 同步底部区域的滚动位置
        </div>
      </div>

      <div
        ref={botDivRef}
        id="bot"
        style={{
          overflowX: 'auto',
          border: '1px solid #ddd',
          padding: '8px',
          marginTop: '12px'
        }}
      >
        {/* 这里替换成你自己的底部内容 */}
        <div style={{ width: '2000px', height: '80px', backgroundColor: '#e8e8e8' }}>
          底部滚动区域：滚动这里也会同步顶部的位置 ← 双向同步生效
        </div>
      </div>
    </div>
  );
}

export default SyncHorizontalScroll;

关键细节说明 #

• 用useRef获取DOM元素：这是React官方推荐的获取DOM元素的方式，比直接查询DOM更高效，也更符合组件化的封装思想。
• useEffect管理事件生命周期：在组件挂载时添加滚动监听，卸载时移除，避免组件卸载后事件仍然存在导致的内存泄漏。
• 滚动锁的优化：和你原来的逻辑一样，用两个布尔变量防止滚动事件互相触发形成循环；添加setTimeout是为了确保浏览器完成滚动渲染后再解锁，避免同步不及时的问题。
• 样式适配：给两个div设置overflowX: 'auto'开启横向滚动，你可以根据自己的业务需求调整宽度、边框、背景等样式。

如何调用这个组件 #

和使用普通React组件一样，在你的父组件中导入并渲染即可：

import SyncHorizontalScroll from './SyncHorizontalScroll';

function App() {
  return (
    <div className="App">
      <h2>React双向横向滚动同步示例</h2>
      <SyncHorizontalScroll />
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者JsNinja