为何React组件无法作为Node？appendChild()报错原因解析

你报错的核心原因是**<TextCopy text={text} />是React虚拟元素，不是浏览器原生的DOM节点**。appendChild()是浏览器原生DOM API，它要求传入的必须是真实的DOM Node对象，而你传的JSX编译后是React元素对象，类型不匹配，所以抛出这个错误。

React的设计思路是声明式渲染，你应该通过状态（state）来控制页面上的内容，而不是直接调用原生DOM API去修改页面。直接操作DOM会绕过React的虚拟DOM机制，导致React无法追踪页面状态，很容易出现渲染不一致的问题。

正确的实现方式 #

用useState维护需要渲染的TextCopy组件列表，点击按钮时往状态里添加新内容，React会自动帮你更新DOM：

import React, { useState } from 'react'
import './global.css'
import TextCopy from './TextCopy/TextCopy'
import Title from './Title/Title'

export default function App() {
  // 用状态存储要渲染的文本列表
  const [copies, setCopies] = useState([])

  const addTextCopy = (text) => {
    // 往列表里新增一项，React会自动重新渲染
    setCopies(prevCopies => [...prevCopies, text])
  }
  
  return (
    <>
      <Title />
      <button onClick={() => addTextCopy("test")}>JAVA</button>
      <div id="wrapper">
        {/* 遍历状态渲染TextCopy组件 */}
        {copies.map((text, index) => (
          <TextCopy key={index} text={text} />
        ))}
      </div>
    </>
  )
}

额外说明 #

• 示例里用index作为key只是简化写法，如果你的列表项有唯一标识（比如ID），最好用唯一值当key，避免不必要的渲染性能损耗。
• React中除非遇到操作第三方DOM库这类特殊场景，否则不要直接调用原生DOM API修改页面，状态驱动渲染才是符合React设计理念的正确姿势。

内容的提问来源于stack exchange，提问作者Kip