将 React 组件注入 html 页面答案

【问题标题】：Inject React component into html page将 React 组件注入 html 页面
【发布时间】：2021-03-05 17:27:31
【问题描述】：

我正在尝试用 React 做一些事情，但我不知道我是否以正确的方式做...

我创建了一个 React 组件（使用 create-react-app）。

我将 js 文件（构建后）放在了 Web 服务器上。

之后，在一个 html 页面上，当我点击一个按钮时，我会插入 js 文件。如果页面上存在具有特定 id 的 div，则加载该组件。

这很酷，我为自己所做的一切感到高兴，万岁 \o/

但在那之后，我尝试删除组件（清空 div）并单击按钮重新加载，但什么也没发生...

当我点击按钮时调用的函数删除脚本，清空 div 和重新插入脚本。但是什么也没发生……我不知道为什么：/

任何帮助将不胜感激：D

提前谢谢

编辑：我解决了我的问题。我正在删除脚本，假设重新注入它会重新加载组件，但它不会那样工作......

这是一个示例代码：https://codesandbox.io/s/blissful-fire-ytbj9?file=/public/index.html

我在 React 组件中编写了一个函数来渲染它。我可以直接在 html 页面中调用这个函数，这样我就可以清空 div 并在单击重新加载按钮时重新加载组件。

【问题讨论】：

能否分享代码sn-p，以便我们更好地识别问题？

标签： javascript html reactjs

【解决方案1】：

看起来你所做的不是标准的，你必须在你的 web 应用中为你的 react 组件创建一个容器，然后像这样编写你的组件：

const rc = React.createElement;

class ReactExample extends React.Component {    
  render() {
    return rc(
      'button',
      { onClick: () => alert("Hello from ReactJS!") },
      'say hi'
    );
  }
}

ReactDOM.render(rc(ReactExample), document.querySelector('#reactContainer'));

将其保存在 js 文件中，然后将其导入您的 HTML 页面。

注意：如果需要，您可以使用 JSX，但您必须使用 babel 转译您的 JSX。

最后，将react导入项目中：

用于生产：

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

用于开发：

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

【讨论】：