我希望将我的 React 应用程序嵌入到现有的纯 html/javascript 网站中。到目前为止,我发现您只能将单个组件嵌入到现有网站中,而不能嵌入整个 React 应用程序。
当然,我有一个包含整个应用程序的应用程序组件。我可以通过嵌入此组件来嵌入完整的应用程序吗?我担心我正在使用的所有模块(例如 axios、bootstrap)都会损坏。
我一直在寻找有关如何执行此操作的好教程,但我没有找到很多尝试将整个应用程序嵌入现有页面的示例。
我对如何做到这一点的理解是引用 html 页面头部中的 React javascript 源链接,也可能是 babel,尽管我不清楚 babel 是否可以工作。然后我们可以像平常一样使用 renderDom 方法。
在页面加载时,我可以运行我的index.js 文件以将我的 React 应用程序组件插入到 dom 中吗?如果这可行,我需要处理文件结构、文件更新方面是否存在任何问题?
如果我开车驶入荒野,并且有更好的方法来处理它,我愿意接受建议。我只是想看看其他人是否有这样做的经验,然后再走上一条糟糕的道路。
最佳答案
我能够通过执行以下操作来嵌入我的完整 react 应用程序...
- 我使用 npm run build 构建了我的 React 应用程序生产文件
- 我将这些文件复制到现有 Web 项目的根级别
- 然后,我打开从 npm run build 生成的 index.html 文件,并将 head 和 body 部分中的脚本复制到我想要放入应用程序中的页面
- 最后,我添加了一个带有 id root 的 div(这就是我的 renderDOM 方法正在寻找的内容),我希望我的应用程序出现在现有网页上。
就是这样。 super 简单,感谢您的帮助!
关于reactjs - 将完整的 React 应用程序嵌入到现有网页中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53855894/