时间戳

首页 > 解决方案 > 使用 react useRef() -- 为什么我的 ref 为空？

reactjs - 使用 react useRef() -- 为什么我的 ref 为空？

问题描述

我有一个简单的例子

function Node() {
    const [hidden, setHidden] = useState(true);
    const inputRef = useRef(null)
    console.log(inputRef);
    return (
        <div>
            {!hidden && <h2 ref={inputRef}>Hello World</h2>}
            {hidden && <button onClick={() => setHidden(false)}>Show Child</button>}
        </div>
    )
}

单击按钮后，我希望 h2 DOM 元素附加到我的 ref。但是，我发现 ref.current 在记录时仍然为空，但如果我展开对象，它包含 DOM 节点。

我应该如何通过我的 ref 访问 DOM 元素？在我想引用它时，例如inputRef.current.getBoundingClientRect()，它始终显示为 null。非常感谢您的帮助！

标签： reactjsreact-hooks

解决方案

您正在尝试在渲染阶段使用 ref，但是一旦 React 在提交阶段绘制屏幕，​​就会填充 ref。因此，将其称为useEffect或useLayoutEffect

// run synchronously after all DOM mutations
React.useLayoutEffect(() => {
  // do something with inputRef
}, [])

推荐阅读