为什么 document.getElementsByClassName 在 React 中不起作用？

Question

所以我有这段代码

const desc_object = document.getElementsByClassName("singlePostDesc");
console.log(desc_object[0]);

这就是 JSX

{updateMode ? (
                        <>
                            <textarea
                                className="singlePostDescInput"
                                autoFocus={true}
                                id="desc"
                                onChange={(e) => setDesc(e.target.value)}
                                onKeyPress={(e) => key_callback(e.key)}
                            >
                                {desc}
                            </textarea>
                            <button
                                className="singlePostButton"
                                onClick={update_post_to_backend}
                            >
                                Update Post
                            </button>
                        </>
                    ) : (
                        <div className="singlePostDesc" id="descThing">
                            <ReactMarkdown children={sanitizeHtml(desc)} />
                        </div>
                    )}

但我得到的结果是 undefined。为什么？是因为它包裹在三元运算符中吗？我正在使用 React JS。

Answer 1

为了在 React 中访问 DOM 方法，你必须在 useEffect 钩子中调用这段代码。

useEffect(() => {
  const desc_object = document.getElementsByClassName("singlePostDesc");
  if (desc_object) {
   // now you can access it here
  }

})

尽管第一次 useEffect 挂钩运行s getElementsByClassName 将 return undefined 因为 DOM 尚未安装。

如果你想运行这个DOM只在组件挂载后查询，你可以创建一个自定义挂钩：

const useDidMountEffect = (func, deps) => {
 const didMount = useRef(false)

 useEffect(() => {
   if (didMount.current) func()
   else didMount.current = true
  }, deps)
}

然后你就可以这样使用了:

useDidMountEffect (() => {
 const desc_object = document.getElementsByClassName("singlePostDesc");


})

更新：

如评论所述，理想情况下你不应该使用 vanilla js，你应该使用 React Refs

为什么 document.getElementsByClassName 在 React 中不起作用？

Why is document.getElementsByClassName not working in react?

javascript

document

reactjs