React js：在单页应用程序中呈现多个索引 html
Posted
技术标签:
【中文标题】React js：在单页应用程序中呈现多个索引 html【英文标题】：React js : Rendering multiple index html in a single page applications 【发布时间】：2019-12-29 19:14:55 【问题描述】：我正在用 React 和 Node.js 开发一个电子商务网站。我面临以下两个问题。
我有两个不同的主文件 .html 用于管理端和前端端。因此，我正在使用内置的 React 管理模板，其中 index.html 在项目开始时加载。我的问题是如何加载另一个大师.html 进行前端设计？
我想使用 Node.js 作为后端。因此，我无法将 node.js 与 React 前端或管理端集成，如果 React 应用程序运行，它将运行。
我们将不胜感激任何建议或解决方案步骤。
【问题讨论】：
将更高级别的索引页面作为***页面，并将您当前的两个“***”页面都转换为该页面的子页面。 您还可以在 index.html 页面中使用单独的 div 作为 ReactDOM.render 目标，每个页面 1 个。 @DovRine 感谢您的回复，有任何示例或示例代码吗？ 顺便说一句，如果您使用 docker 或虚拟机，您可以运行多个节点服务器。 【参考方案1】：这是第一个想法的一个非常基本的概念：
const AdminIndexPage = children => (<section className="AdminIndexPage">children</section>)
const PublicIndexPage = children => (<section className="PublicIndexPage">children</section>
const App = props =>
if(props.indexPageToShow === 'admin')
return <AdminIndexPage ...props />
else
return <PublicIndexPage ...props />
这是第二个想法的一个非常基本的概念：
index.html
<html>
<head>
<script src="index.js"></script>
</head>
<body>
<div id="AdminPageIndex"></div>
<div id="PublicPageIndex"></div>
</body>
</html>
index.js
import AdminPageIndex, PublicPageIndex from './pages'
ReactDOM.render(AdminPageIndex, document.getElementById('AdminPageIndex'))
ReactDOM.render(PublicPageIndex, document.getElementById('PublicPageIndex'))
【讨论】：
不，我想用不同的脚本在两个不同的 html 中渲染组件。 在 2 个不同项目中具有不同 Web 根目录的子域？我想我不明白你在做什么。 实际上我将有两个不同设计的不同html模板，一个用于管理仪表板，另一个用于前端仪表板。将有两个不同设计的 html，但到目前为止，我知道 react 可以将任何组件加载到单个 html 模板中。因此我面临这个问题。 我的想法 2 解决您的问题 @DovRine 看来我遇到了同样的问题，现在才看到这篇文章。在深入讨论之前，我只是想知道使用第二种解决方案来解决这个问题是否是最佳实践。我需要一个管理面板并为此使用 AdminLTE 模板。我只是不想在剩余的前端单页中使用与管理员相关的 CSS 和脚本。以上是关于React js：在单页应用程序中呈现多个索引 html的主要内容，如果未能解决你的问题，请参考以下文章
如何在单页中使用 php 从 while 循环中生成多个读取更多按钮？
在单页应用程序中取消绑定事件侦听器和删除子元素的正确方法是啥？
在单页应用程序中，当在 VueJs 中输入新数据时，如何在不重新加载页面的情况下重新加载 api [关闭]