为什么React中使用document.getElementsByClassName返回undefined？

问题原因 #

你拿到undefined确实和三元运算符包裹的条件渲染逻辑直接相关，核心有两点：

• 只有当updateMode的值为false时，带singlePostDesc类名的div才会被渲染到DOM树中。如果执行DOM查询代码时updateMode为true，这个元素根本不存在，getElementsByClassName返回的集合为空，取第0项自然是undefined
• 就算updateMode为false，如果查询代码的执行时机早于组件挂载完成、或者状态更新后的DOM重渲染完成时机，也会拿不到已渲染的节点，比如你把查询代码直接写在组件函数体顶层，首次渲染时DOM还没生成，肯定返回空

正确实现方案 #

React不推荐使用原生DOM查询API操作节点，你应该用useRef钩子绑定目标元素：

// 先引入所需钩子
import { useRef, useEffect } from 'react'

// 组件内部定义ref
const descRef = useRef(null)

// JSX中绑定ref到目标节点
{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" ref={descRef}>
    <ReactMarkdown children={sanitizeHtml(desc)} />
  </div>
)}

如果需要访问该节点，要在useEffect中触发，保证节点已完成渲染：

useEffect(() => {
  // 仅当updateMode为false时，ref才会指向已渲染的节点
  if (!updateMode && descRef.current) {
    console.log(descRef.current)
    // 此处写你需要操作节点的业务逻辑
  }
}, [updateMode])

内容的提问来源于stack exchange，提问作者lakshya 'Coding' Jain