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

Question

我不知道如何制定的问题隐约少，但它是关于通过噪声值和传递按引用情况作出反应。和钩子。

我正在使用 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>
    )}

这会引发“类型错误：无法添加属性 _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

在第一个示例中，您没有使用 a ref，而是navbar通过ref回调重新分配navbarDOM 元素。

它与

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()而不是里面的 DOM 元素navbar.current

现在在第二个示例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>
  )
}