在 useEffect Hook 中选择一个 DOM 元素

Question

我正在尝试 select 我使用 useRef 挂钩 select 编辑的 DOM 中另一个元素内部的元素。

const editorRef = useRef(null);

在 useEffect 钩子内部，我尝试 select editorRef

上的子元素

useEffect(() => {
   editorRef.current.querySelector(".ql-editor").innerHTML = post.content; 
}, []);

但是我得到了一个

TypeError: "Cannot set property 'innerHTML' of null"

但是当我在第一次刷新后保存我的代码时，它确实有效并且填充了 innerHTML。

Answer 1

useEffect Hook 调用您在 DOM 创建之前传递给其依赖项的函数。
因此，由于没有 DOM，因此 select 将没有元素，这会导致未定义的错误。

还有一个名为 useLayoutEffect 的挂钩，它将在 DOM 创建后调用函数

 useLayoutEffect(() => {
   editorRef.current.querySelector(".ql-editor").innerHTML = post.content; 
}, []);

阅读 Here

中有关 useLayoutEffect 的更多信息

Selecting a DOM element inside of a useEffect Hook