Question

我正在尝试使用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
为什么“渲染目标”div仍然存在，而“包装器”是重复的？

编辑：
路由器部分是

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

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

Answer 1

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

不会替换始终存在的render-target ID。至于副本，我从未见过＆＃34;意外地＆＃34;发生。如果您可以显示整个代码，我几乎可以肯定我们会发现您还有其他内容呈现给该元素。

您使用的是哪些套餐？什么版本的流星？什么路由器？这些都很重要。

最后，我建议使用react-template-helpers，因为在使用meteor + react时会发生什么事情要清楚得多。此meteor starter boilerplate可以使用它的一个示例。

Meteor + React元素重复

1 个答案: