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中的新手，反应世界，所以也许我没有得到正确的哲学......

Answer 1

您可以使用门户网站的React 16新功能。

有关如何使用ReactDOM.createPortal的信息，请参见以下链接： How to use ReactDOM.createPortal() in React 16?

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）来调用所有其他组件。在我的示例中，通过调用Login组件：

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

Answer 3

我相信，因为render（）语句也具有隐式return语句，所以由于它只能执行并返回一个隐式语句，因此不会执行下一个render语句。

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

3 个答案: