😩这次遇到一个需求，要求页面上垂直并列的三个表格，滚动其中一个，另外两个也能跟着一起滚动。

项目使用的是antd table，table组件没有暴露onScroll接口，也不能直接使用ref（好像最近有修复，但还没有release）。

废话不多说，直接上粗暴实现方法

const Table: React.FC = (p) => {

  const { metaData, rawData } = p;

  const numTable = Object.keys(metaData).length;

  const [elRefs, setElRefs] = React.useState([]); //用一个list来包所有的ref



  React.useEffect(() => {

    // add or remove refs

    setElRefs(elRefs => (

      Array(numTable).fill(undefined).map((_, i) => elRefs[i] || createRef())

    )); //根据生成表格的数量来生成refs

  }, [numTable]);



// 主要逻辑代码，很粗糙直接，但也能应付产品，如果有更好的改进方法，请不吝赐教

  const handleOnScrollCapture = (e, index) => {

    if (elRefs[index]?.current) {

      const scrolledTable = elRefs[index]?.current.querySelector(".ant-table-body"); 

      elRefs.forEach((el, i) => {

        if (i !== index) {

          const otherTable = el.current.querySelector(".ant-table-body");

          otherTable.scrollTop = scrolledTable.scrollTop;

          otherTable.scrollLeft = scrolledTable.scrollLeft;

        }

      })

    }

  }



//没啥好说的，就是一个动态渲染多个表格，因为antd table不能直接加ref，就又包了一层div

  const render = Object.keys(metaData).map((key, index) => {

    if (metaData[key].length > 0) {

      return (

        <div

        key={index}

        ref={elRefs[index]}

        onScrollCapture={(e) => handleOnScrollCapture(e, index)}

        >

          <Table

            ...省略了啊

          />

        </div>

      );

    }

  });



return <div>{render}</div>;

};

因为otherTable.scrollTop = scrolledTable.scrollTop; 语句本身就是对dom进行操作，已经是指令式操作，所以就没有用声明式写法。