如何从单个构建中加载单独的组件

Question

所以情况是我正在为在 php yii框架上运行的旧版网站编写代码。

我的任务是为该项目制作少量组件，其中一些属于PageA，并假设该页面的所有组件都是从ContainerA加载的，而我还有另一个页面叫它{{ 1}}的组件很少，并且所有组件都是从PageB加载的，现在我必须为该项目创建构建。所有这些组件都是单个构建

的一部分

我的问题是如何使用现有的框架路由

从单一构建的相应页面加载这些组件

编辑：我希望代码示例可以帮助您更好地理解

Answer 1

您可以在构建的入口文件中进行多个ReactDOM.render调用，并在呈现该特定页面的组件树之前检查文档中是否存在页面的容器。

示例

const pageOneContainer = document.getElementById('page-one-container');
if (pageOneContainer) {
  ReactDOM.render(<PageOneComponent />, pageOneContainer);
}

const pageTwoContainer = document.getElementById('page-two-container');
if (pageTwoContainer) {
  ReactDOM.render(<PageTwoComponent />, pageTwoContainer);
}