reactjs - 将 useRef 钩子(Hook)传递给 ref 属性的正确方法

Question

我不确定如何更模糊地表述这个问题，但它大约是 传值和 通过引用 react 中的案例。和钩子(Hook)。

我正在使用 gsap 为 div 滑入和滑出设置动画，这是它的上下文，但我猜想 ref 的用途并不重要。

所以，这很好用，即使这是我理解的传递 ref 的更典型的类组件方式:

const RootNavigation = () => {
var navbar = useRef();

const myTween = new TimelineLite({ paused: true });    
const animate = () => {
    myTween.to(navbar, 0.07, { x: "100" }).play();
  };

return(
     <div className="nav-main" ref={div => (navbar = div)}>   // <<<<<<<<<<   pass as a callback
     ...
    </div>
    )}

这会引发“TypeError:无法添加属性 _gsap，对象不可扩展”错误，尽管 React Hooks 指南会让我这样做:

const RootNavigation = () => {
var navbar = useRef();

const myTween = new TimelineLite({ paused: true });    
const animate = () => {
    myTween.to(navbar, 0.07, { x: "100" }).play();
  };

return(
     <div className="nav-main" ref={navbar}>          //<<<<<<<<<<<<<  not passing a callback
     ...
    </div>
    )}

有人可以向我解释这里发生了什么，甚至可以给一个男孩一个链接到已经解释过的地方吗？我确定某种丹角色在某处写过它，我只是不确定要谷歌什么。谢谢!

Answer 1

在第一个示例中，您没有使用 ref ，您正在重新分配 navbar通过ref回调所以 navbar是 DOM 元素。

这是一样的

let navbar = null;

return <div ref={node => (navbar = node)} />

在第二个示例中，您使用的是 ref 对象 这是一个带有 current 的对象保存 DOM 元素的属性

const navbar = useRef(null)

return <div ref={navbar} />

导航栏现在

{ current: the DOM element }

所以你将对象传递给 myTween.to()而不是 navbar.current 中的 DOM 元素

现在在第二个例子中 gsap正在尝试扩展 ref对象本身而不是 DOM 元素。

为什么我们得到 TypeError: Cannot add property _gsap, object is not extensible`？

如果你看 useRef 的源代码你会看到在线 891

if (__DEV__) {
  Object.seal(ref);
}

React 正在密封 ref对象和 JavaScript当我们尝试使用 Object.defineProperty() 扩展它时会抛出错误这可能是 gsap是在做。

使用 ref 的解决方案将通过 ref.current进入 tween.to()

const RootNavigation = () => {
  const navbar = useRef()

  const myTween = new TimelineLite({ paused: true });   

  const animate = () => {
    myTween.to(navbar.current, 0.07, { x: "100" }).play()
  }

  return (
    <div className="nav-main" ref={navbar}>
      ...
    </div>
  )
}