meteor - 使用路由将 React 组件渲染到特定的 div

Question

我正在使用 FlowRouter 作为我正在尝试创建的 Meteor/React 应用程序的路由器。我很难让我的反应组件在特定位置呈现。有谁知道如何做到这一点？

所以在我的登陆页面上，当我点击一个按钮时，我想路由到一个二级页面。我想在页面的某些部分呈现三个不同的组件。我一直在使用ReactLayout.render()，但我似乎无法确保组件在某些区域得到渲染。我以为document.getElementById会工作

ReactLayout.render(LandingPage, document.getElementById("landing-page")

但事实并非如此。

Answer 1

ReactLayout.render 的第二个参数需要一个对象。如果您想将多个组件呈现到您的 LandingPage 元素中，它可能看起来像这样：

LandingPage = React.createClass({
  render() {
    return (
      <div className="app-root">
        <AppHeader />
        <div className="container">
          {this.props.testOne}
        </div>
        <div className="app-root">
          {this.props.testTwo}
        </div>
      </div>
    );
  }
});

然后使用渲染：

FlowRouter.route( '/testRedirect', {
  name: 'test',
  action() {
    ReactLayout.render( Default, { testOne: <TestOneComponent />, testTwo: <TestTwoComponent /> } );
  }
});