将 React 组件注入 html 页面

Question

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

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

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

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

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

但在那之后，我试图删除组件（清空 div）并单击按钮重新加载，但没有任何反应......

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

任何帮助将不胜感激：D

提前谢谢

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

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

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

Answer 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>