时间戳

首页 > 解决方案 > 使用回调 ref 修改 React 中的 scrollLeft 属性

html - 使用回调 ref 修改 React 中的 scrollLeft 属性

问题描述

我有一个包含很多孩子的容器 div，以及一个设置为滚动的溢出 x。

这使我可以使用触控板（或在移动设备上拖动）左右滚动内容。

但我真的希望默认滚动位置是最大水平值。（即一直向右滚动）。相关代码是Element.scrollLeft = <some large value>.

我试图弄清楚如何使用 React 和回调引用来实现这一点。我有以下代码：

const containerRef = useCallback(
  (node) => {
    if (node !== null) {
      node.scrollLeft = values.length * 20;
    }
  },
  [values.length]
);
return (
    <div className={"scroll-wrapper"} ref={containerRef}>
      values.map(()=>{
        // Some stuff in here that's irrelevant.
      });
    </div>
)

（此代码基于https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node）

当我在 useCallback 函数中放置一个断点时，我看到它被正确地调用了一个非 0 值，但是在我检查node.scrollLeft它的调用之后它仍然是 0。

当我在 Chrome 中检查 DOM 时，我实际上可以强制scrollLeft元素的值为大数字，这确实有效。

那么为什么 React useCallback ref 不起作用呢？

标签： htmlreactjsreact-hooks

解决方案

您应该使用useRef挂钩来处理 refs。

要创建 ref 使用这个：

const containerRef = useRef();

并像以前一样将其添加到ref：div

<div className={"scroll-wrapper"} ref={containerRef}>
  ...
</div>

您应该使用useEffect并调用一次以设置scrollLeftref 中的组件：

useEffect(() => {
  ref.current.scrollLeft = 4000;
}, []);

这是完整的示例：https ://codesandbox.io/s/lingering-glitter-s0gok?file=/src/App.js

推荐阅读