Meteorjs + React，如何在 Meteor.startup 中渲染多个元素

Question

我正在尝试声明两个我想要呈现的不同 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 世界的新手，所以也许我没有得到正确的理念...

Answer 1

您可以使用 React 16 的新功能，即门户。

ReactDOM.createPortal的使用方法请参考以下link：

Answer 2

我仅使用 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) 必须用于调用所有其他组件。在我的示例中，通过调用登录组件：

render() {
    return (
        <div className="container">
            <Login />
        </div>
    )
}

Answer 3

我相信是因为 render() 语句也有一个隐含的 return 语句，所以由于它只能执行和 return 一个，所以不会执行下一个 render 语句。

Meteorjs + React，如何在 Meteor.startup 中渲染多个元素

Meteorjs + React, how to render several elements in Meteor.startup

javascript

meteor

reactjs