将React组件注入html页面

Question

我试图做一些事情与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并在单击reload按钮时重新加载组件。

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，但是你必须使用by 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>