React：如何将 React 组件注入 body？

Question

我有一个想要注入到 DOM 中的 React 组件。这是因为我的 JS 会被其他网站所有者通过脚本标签加载，而不是加载到我控制的 SPA 上。

我想要做的是将我的Root组件附加到body网页的 。

如果我做这样的事情，那么它会替换我身体的所有内容，这不是我想要的。

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

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

if (!module.parent) {
    ReactDOM.render(<Root />, document.querySelector("body")); // <-- wrong
}

我想要类似的东西document.querySelector("body").appendChild(<Root />)。这可能吗？

Answer 1

如果您选择单线：

ReactDOM.render(
  <Root />,
  document.body.appendChild(document.createElement("DIV"))
)

运行示例：

ReactDOM.render(
  <Root />,
  document.body.appendChild(document.createElement("DIV"))
)

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

ReactDOM.render(
  <Root />,
  document.body.appendChild(document.createElement("DIV"))
)