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 /> } );
  }
});

使用路由将React组件渲染到特定Div

1 个答案: