ReactJS中向父DOM追加子DOM时遇问题：仅添加字符串而非DOM

你现在踩了一个React新手常犯的坑——直接绕开React的状态机制，用jQuery把HTML字符串硬塞到DOM里，这不仅不符合React的设计逻辑，还导致你添加的是纯文本字符串而非真实DOM节点（顺带提一句，原生HTML里是class而不是className，这也是个小细节错误）。

React的核心是状态驱动UI，正确的做法应该是用状态来管理你要添加的intent数量或列表，让React帮你自动渲染真实DOM，而非手动拼接字符串操作DOM。

推荐的React标准写法（函数组件） #

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

function IntentContainer() {
  // 用state保存所有要渲染的intent列表，初始为空数组
  const [intents, setIntents] = useState([]);

  // 点击按钮时添加新的intent项
  const handleAddIntent = () => {
    // 用扩展运算符复制旧数组，添加带唯一id的新intent（时间戳保证唯一性）
    setIntents(prevIntents => [...prevIntents, { id: Date.now() }]);
  };

  return (
    <div>
      {/* 触发添加操作的按钮 */}
      <button onClick={handleAddIntent}>添加Intent</button>
      {/* 循环渲染所有intent元素 */}
      {intents.map(intent => (
        <div key={intent.id} className="intent">
          这里是你的intent内容
        </div>
      ))}
    </div>
  );
}

// 将组件渲染到页面指定容器
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<IntentContainer />);

为什么这是正确的做法？ #

• React会监听intents状态的变化，自动重新渲染组件并生成真实DOM节点，完全不用你手动拼接字符串
• 每个intent的key属性是给React内部用的，帮助它高效识别元素、避免无效重渲染
• 这种声明式写法更符合React的设计理念，代码也更容易维护和调试

特殊场景下的手动DOM操作（非常不推荐） #

如果你因为特殊需求一定要直接操作DOM，那得先把字符串转换成真实DOM元素再追加，而不是直接扔字符串：

// 创建真实的div元素
const intentElement = document.createElement('div');
intentElement.className = 'intent';
intentElement.textContent = '你的intent内容'; // 若需插入HTML可用innerHTML，但要注意XSS风险

// 获取React组件对应的真实DOM节点
const reactDomNode = ReactDOM.findDOMNode(intentContainer);
// 追加真实DOM元素
reactDomNode.appendChild(intentElement);

⚠️ 注意：这种手动操作DOM的方式在React项目里强烈不推荐，因为React的虚拟DOM和真实DOM可能会不同步，导致组件重渲染后手动添加的元素消失等奇怪bug。

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