在 Laravel 中渲染多个 ReactJS 组件而不使用 ReactJS 路由器

Question

我想在新窗口选项卡中呈现多个 ReactJS 组件。我想使用 PHP Laravel 路由器来渲染多个组件。

我试过了：

1. 在视图文件中我有 <div id="root"></div> 在 index.js 文件中我有

ReactDOM.render(<App ></App>, document.getElementById('root'));

我使用了两个具有不同 div ID 和组件的 ReactDOM.render，它给了我以下错误：

目标容器不是 DOM 元素

我搜索了这个错误，但找不到解决方案。

2. 我在没有任何路由器的情况下尝试了以下代码： 我在 onclick 事件动作调度的 reducer(Redux) JS 文件中编写了以下代码。

import secondComponent from '../PathToFile';
.
.
var newWindow= window.open('', '', 'width=600,height=400,left=200,top=200');
var element =  document.createElement('div');
element.innerHTML = <secondComponent/>;
newWindow.document.body.appendChild(element);

但结果是：

[对象对象]

在新窗口标签中。我错过了什么吗？

请指导我。我哪里做错了？

Answer 1

我想我不太明白你的问题，但我认为你应该添加更多的根元素，这是可能的，我的意思是：

<div id="root"></div>
<div id="that-component-root"></div>

并在您的代码上基于您的 PHP 路由导入每个捆绑的文件。每个捆绑的文件都应该注入到它们自己的根元素中：

ReactDOM.render(<App />, document.getElementById('root'));

和

ReactDOM.render(<ThatComponentRoot />, document.getElementById('root'));

等等

但我认为，如果我真正了解您的问题，您的项目可能会非常复杂。