如何为JSX元素添加子元素？为何appendChild方法失效？

原代码失效的核心原因 #

你写的代码里，let elem = <div></div> 生成的不是真实的DOM元素，而是React元素对象——JSX本质是React.createElement()的语法糖，编译后返回的是一个描述DOM结构的普通JS对象（包含type、props等属性），根本没有appendChild这类DOM原生API方法，所以调用会报错。

正确添加子元素的几种方式 #

1. 声明JSX时直接嵌入子元素 #

这是最常规的写法，直接在父元素标签内定义子元素：

// 直接写入
let elem = <div><h1>abc</h1></div>

// 或者通过变量传递
const childElement = <h1>abc</h1>
let elem = <div>{childElement}</div>

如果有多个子元素，可以用数组包裹（注意给每个子元素加唯一key）：

const children = [
  <h1 key="title">abc</h1>,
  <p key="desc">这是一段描述</p>
]
let elem = <div>{children}</div>

2. 组件内动态管理子元素（推荐） #

在React组件中，动态添加子元素应该通过**状态（state）**来实现，让React自动处理虚拟DOM的更新：

import { useState } from 'react'

function DynamicComponent() {
  // 用状态存储子元素列表
  const [childElements, setChildElements] = useState([
    <h1 key="1">初始子元素</h1>
  ])

  const addNewChild = () => {
    // 基于旧状态更新，避免直接修改原数组
    setChildElements(prev => [
      ...prev,
      <h1 key={prev.length + 1}>新添加的子元素</h1>
    ])
  }

  return (
    <div>
      {/* 渲染子元素列表 */}
      {childElements}
      <button onClick={addNewChild}>添加子元素</button>
    </div>
  )
}

3. 操作真实DOM（仅特殊场景使用） #

如果确实需要直接操作真实DOM（比如集成非React的第三方库），可以通过useRef获取真实DOM节点后调用原生API：

import { useRef, useEffect } from 'react'

function DomManipulationComponent() {
  // 创建ref关联真实DOM元素
  const parentRef = useRef(null)

  useEffect(() => {
    // 在组件挂载后操作真实DOM
    if (parentRef.current) {
      const newH1 = document.createElement('h1')
      newH1.textContent = 'abc'
      parentRef.current.appendChild(newH1)
    }
  }, [])

  return <div ref={parentRef}></div>
}

⚠️ 注意：这种方式绕过了React的虚拟DOM机制，可能导致组件状态与DOM实际内容不一致，除非必要不建议使用。

内容的提问来源于stack exchange，提问作者Александр