Meteorjs + React, как визуализировать несколько элементов в Meteor.startup - PullRequest
Новая
       8

Meteorjs + React, как визуализировать несколько элементов в Meteor.startup

0 голосов
/ 08 июня 2018

Я пытаюсь объявить два разных элемента 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-файле?

Я новичок в мире метеоритов и реагирования, поэтому, возможно, я не понял правильную философию ...

Ответы [ 3 ]

0 голосов
/ 20 июня 2018

Я решил свою проблему, используя только один рендер в 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'));
})

Хитрость заключается в том, что этот Супер компонент (App.jsx) должен использоватьсядля вызова всех других компонентов. В моем примере, вызывая компонент Login: 

render() {
    return (
        <div className="container">
            <Login />
        </div>
    )
}
0 голосов
/ 25 июня 2018

Я полагаю, потому что оператор render () также имеет неявный оператор return, так как он может только выполнить и вернуть один, следующий оператор рендеринга не выполняется.

0 голосов
/ 20 июня 2018

Вы можете использовать новую функцию React 16. Это портал.

Чтобы узнать, как использовать ReactDOM.createPortal, перейдите по следующей ссылке: Как использовать ReactDOM.createPortal () в React 16?

...