选择 useEffect Hook 内的 DOM 元素

Question

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

const editorRef = useRef(null);

在 useEffect 挂钩内部，我尝试选择 editorRef 上的子元素

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

但我得到一个

类型错误：“无法将属性‘innerHTML’设置为 null”

但是当我在第一次刷新后保存代码时，它实际上起作用并且innerHTML被填充。

Answer 1

useEffectHook 调用您在 DOM 创建之前传递给其依赖项的函数。
因此，由于没有 DOM，因此将没有可供选择的元素，并且会导致未定义的错误。

还有另一个被调用的钩子useLayoutEffect将在 DOM 创建后调用该函数

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

在此处阅读有关 useLayoutEffect 的更多信息