Meteorjs + React, как отрендерить несколько элементов в Meteor.startup
Я пытаюсь объявить два разных элемента React, которые я хотел бы отобразить. Оба элемента являются отдельными элементами, такими как отображаемые элементы (App.jsx) и настраиваемая система учетных записей (Login.jsx). Но в моем тесте у меня есть один и тот же код в обоих файлах jsx, чтобы убедиться, что проблема не связана с определенной их частью.
Я также создал файл /imports/startup/client/index.js (он называется в файле /client/main.js):
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import './accounts-config.js';
import App from '/imports/ui/App.jsx';
import Login from '/imports/ui/Login.jsx';
Meteor.startup(() => {
render(<App />, document.getElementById('app'));
render(<Login />, document.getElementById('login'));
})
а /client/main.html содержит связанные теги div:
...
<div id = "app"></div>
<div id = "login"></div>
...
Проблема в том, что второй рендеринг никогда не отображается (здесь логин div), и я заметил, что интерпретируется только первый рендер.
Все примеры, которые я нашел, относятся только к одному элементу реакции. Поэтому мне интересно, как использовать несколько отдельных элементов реакции, как в моем html-файле?
Я новичок в мире Meteorjs и React, так что, возможно, я не понял правильной философии ...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете использовать новую функцию React 16 - портал.
Чтобы узнать, как использовать ReactDOM.createPortal, перейдите по следующей ссылке: Как использовать ReactDOM.createPortal () в React 16?
Я решил свою проблему, используя только один рендер в Meteor.startup (() (в моем index.js). Документ React указывает, что только один рендер может быть объявлен в Meteor.startup (() (в моем index.js). https://reactjs.org/docs/components-and-props.html
Мой код следующий: в моем index.js
Meteor.startup(() => {
render(<App />, document.getElementById('app'));
})
Хитрость в том, что этот компонент Super (App.jsx) должен использоваться для вызова всех остальных компонентов. В моем примере путем вызова компонента входа в систему:
render() {
return (
<div className = "container">
<Login />
</div>
)
}
Я считаю, потому что оператор render () также имеет неявный оператор возврата, поэтому, поскольку он может выполнять и возвращать только один, следующий оператор визуализации не выполняется.
преобразовать
AppиLoginв другой компонент. Затем визуализируйте этот компонент внутри Meteor.startup (). Что-то вроде:render(<NewComponent />, document.getElementById('app'));