React中如何用DOM方法将JSX元素添加至body？

嘿，我完全懂你碰到的麻烦——想通过按钮把JSX定义的元素加到body末尾，但一直触发TypeError对吧？问题出在JSX并不是原生DOM节点，直接用appendChild这类原生DOM方法去插入JSX对象肯定会报错。下面给你几个靠谱的解决方案，都是React环境下的正确操作方式：

核心思路 #

JSX是React的语法糖，编译后会变成React元素对象，不是浏览器能直接识别的DOM节点。必须先通过ReactDOM把JSX渲染成真实的DOM元素，再用原生DOM方法把它添加到body里。

方案一：React 18+ 项目中的实现 #

假设你已经有了定义好的JSX组件，比如：

// 你要添加的JSX元素
const MyDynamicElement = () => (
  <div className="dynamic-element">
    <h4>这是动态添加到body的元素</h4>
    <p>终于不会报错啦 😎</p>
  </div>
);

然后写按钮的点击事件处理函数：

import ReactDOM from 'react-dom/client';

const handleAddToBody = () => {
  // 1. 创建一个空的div容器，用来挂载React元素
  const domContainer = document.createElement('div');
  // 2. 先把容器加到body末尾
  document.body.appendChild(domContainer);
  // 3. 用ReactDOM.createRoot把JSX渲染到容器里
  const root = ReactDOM.createRoot(domContainer);
  root.render(<MyDynamicElement />);
};

最后在按钮上绑定这个函数：

<button onClick={handleAddToBody}>添加元素到body末尾</button>

方案二：旧版React（17及以下）的实现 #

如果你的项目还在用React 17或更早版本，把渲染部分换成ReactDOM.render即可：

import ReactDOM from 'react-dom';

const handleAddToBody = () => {
  const domContainer = document.createElement('div');
  document.body.appendChild(domContainer);
  ReactDOM.render(<MyDynamicElement />, domContainer);
};

避免重复添加的小技巧 #

如果不想每次点击按钮都重复创建相同元素，可以先检查页面上是否已经存在该元素：

const handleAddToBody = () => {
  // 检查是否已有目标元素
  if (document.querySelector('.dynamic-element')) {
    alert('元素已经存在啦！');
    return;
  }

  const domContainer = document.createElement('div');
  document.body.appendChild(domContainer);
  const root = ReactDOM.createRoot(domContainer);
  root.render(<MyDynamicElement />);
};

非React项目中使用JSX的情况 #

如果是在普通HTML项目里想用JSX，需要先引入React、ReactDOM和Babel的CDN来编译JSX，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <!-- 引入React相关CDN -->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- 引入Babel编译JSX -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <button onclick="handleAddToBody()">点击添加元素</button>

  <script type="text/babel">
    const MyDynamicElement = () => (
      <div style={{ margin: '1rem', padding: '1rem', border: '1px solid #ccc' }}>
        <h4>我是动态添加的JSX元素</h4>
      </div>
    );

    function handleAddToBody() {
      const domContainer = document.createElement('div');
      document.body.appendChild(domContainer);
      const root = ReactDOM.createRoot(domContainer);
      root.render(<MyDynamicElement />);
    }
  </script>
</body>
</html>

这样操作后，你就不会再碰到TypeError了——本质就是先把JSX转换成浏览器能识别的真实DOM，再进行插入操作。

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