将 useRef 挂钩传递给 ref 属性的正确方法

我不确定如何更明确地提出这个问题，但它是关于值传递 and 引用传递反应中的情况。还有胡克斯。

我正在使用 gsap 来制作 div 滑入和滑出的动画，这是其上下文，但我猜测 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>
    )}

有人可以向我解释一下这里发生了什么，或者甚至给一个男孩一个已经解释过的链接吗？我确信某个丹角色已经在某处写过有关它的内容，我只是不确定该谷歌什么。谢谢你！

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

它是一样的

let navbar = null;

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

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

const navbar = useRef(null)

return <div ref={navbar} />

导航栏现在是

{ current: the DOM element }

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

现在在第二个例子中gsap正在努力延长ref对象本身而不是 DOM 元素。

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

如果你看一下源代码useRef https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberHooks.js#L888你会在网上看到891

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

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

使用的解决方案ref将会通过ref.current into 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>
  )
}