Рендеринг * * * * * * * * * * * * * * * * * * * * * 100 * *

Question

Я хочу отобразить несколько ReactJS компонентов в новой вкладке окна. Я хочу использовать PHP Laravel Router для рендеринга нескольких компонентов.

Я пытался:

1. В файле просмотра у меня есть <div id="root"></div> в индексе. js файл у меня

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

Я использую два ReactDOM.render с разными идентификаторами div и компонентами, это дает мне следующую ошибку:

Целевой контейнер не является элементом DOM

I искал эту ошибку, но не смог найти решение.

2. Я попробовал приведенный ниже код без какого-либо маршрутизатора: я пишу ниже код в файле reducer (Redux) JS при событии onclick диспетчеризация действия.

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

Я думаю, я не очень хорошо понимаю ваш вопрос, но я думаю, что вы должны добавить больше элемента root, и это возможно, я имею в виду:

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

И на ваших кодах, основанных на вашем PHP маршрутизация импорта каждого связанного файла. каждый связанный файл должен внедрить в свой собственный элемент root:

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

и

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

et c.

Но я думаю, что если я понимаю ваше проблема действительно, возможно, ваш проект может быть очень сложным.