Meteor+React 元素复制答案

【问题标题】：Meteor+React element duplicationMeteor+React 元素复制
【发布时间】：2016-06-19 05:46:05
【问题描述】：

我正在尝试使用 React 创建一个基本 Meteor 应用程序的结构：这是main.html

<head>
    <title>test</title>
</head>
<body>
    <div id="render-target"></div>
</body>

这是启动函数

Meteor.startup(function () {
    ReactDOM.render(<AppLayout />, document.getElementById("render-target"));
});

这是应用布局

AppLayout = React.createClass({
    render() {
        return (
            <div className="wrapper">
                {this.props.nav}
                {this.props.content}
                {this.props.footer}
            </div>
        )
    }
});

据我了解

ReactDOM.render(<AppLayout />, document.getElementById("render-target"));

应该用 AppLayout 元素（“包装器”div）替换 div“render-target”，但是当我运行应用程序时，在主体内部我看到两个 div：“render-target”和“react-根”。 As you can see here
为什么“render-target”div 还在那里，而“wrapper”却重复了？

编辑：
路由器部分是

FlowRouter.route("/", {
    name: "HomePageRoute",

    action:function() {
        ReactLayout.render(AppLayout, {
            nav: <NavBar />,
            content: <HomePageContainer />,
            footer: <Footer/>
        });
    }
});

【问题讨论】：

标签： html meteor reactjs

【解决方案1】：

ReactDOM.render(<AppLayout />, document.getElementById("render-target"));

不会替换render-target id，它将永远存在。至于重复，我从未见过“意外”发生。如果你能展示你的整个代码，我几乎可以肯定我们会发现你有其他东西呈现给那个元素。

您使用什么软件包？什么版本的流星？什么路由器？在这里了解这些都很重要。

最后，我建议为此使用react-template-helpers，因为使用meteor + react 时会发生什么更清楚。此meteor starter boilerplate 提供了它的用法示例。

【讨论】：

我正在使用流星 1.2.1，FlowRouter 和 ReactLayout，（我已经编辑了添加路由器部分的问题）
好的，我认为问题出在路由器上。
是的，所以 ReactLayout 正在插入您的组件 + 您正在手动插入它，因此是重复的。这就是我推荐react-template-helpers 的原因，因为它们可以让你直接看到插入它的位置，从而减少组件渲染两次的混淆。
所以基本上问题是Router内部的ReactLayout在Meteor.startup之前执行，因此AppLayout还没有创建，ReactLayout创建了一个组件，给出了“react-root”id？
不，ReactLayout 说“渲染对此布局做出反应”（即#root），所以它这样做了。然后你也有代码将它渲染到一个特定的 id，所以你有两次反应渲染。