使用路由将 React 组件渲染到特定的 div答案

【问题标题】：Rendering React Components to Specific Div Using Routing使用路由将 React 组件渲染到特定的 div
【发布时间】：2016-02-08 23:53:31
【问题描述】：

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

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

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

但事实并非如此。

【问题讨论】：

标签： meteor reactjs routing flow-router

【解决方案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 /> } );
  }
});

【讨论】：