React技术问题：如何将React组件注入到网页body中？

没问题！你想要的效果完全可以实现，核心思路是先创建一个独立的DOM容器元素，把它追加到body中，再将React组件渲染到这个容器里——这样就不会覆盖body原有的内容，和你想要的document.querySelector("body").appendChild(<Root />)效果一致。

为什么原来的写法会替换body内容？ #

当你直接把document.querySelector("body")作为React渲染的目标元素时，React会清空该元素内部的所有现有内容，然后插入你的组件输出。这是React渲染机制的默认行为，所以才会出现替换整个body的问题。

具体实现代码 #

适用于React 17及以下版本

import React from "react";
import ReactDOM from "react-dom";

class Root extends React.Component {
  render() {
    return <div>heyyyyyyy</div>;
  }
}

if (!module.parent) {
  // 1. 创建一个空的div作为组件容器
  const rootContainer = document.createElement('div');
  // 2. 将容器追加到body末尾
  document.body.appendChild(rootContainer);
  // 3. 把React组件渲染到这个容器中
  ReactDOM.render(<Root />, rootContainer);
}

适用于React 18+版本（推荐使用createRoot API）

import React from "react";
import { createRoot } from "react-dom/client";

class Root extends React.Component {
  render() {
    return <div>heyyyyyyy</div>;
  }
}

if (!module.parent) {
  const rootContainer = document.createElement('div');
  document.body.appendChild(rootContainer);
  // 使用React 18的createRoot API
  const root = createRoot(rootContainer);
  root.render(<Root />);
}

额外优化建议 #

如果需要给你的组件容器添加样式或者标识，可以给创建的div加上class或id，方便后续维护：

const rootContainer = document.createElement('div');
rootContainer.className = 'my-react-widget-container'; // 添加类名
document.body.appendChild(rootContainer);

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