Рендеринг компонентов React в определенный Div с использованием маршрутизации

Я использую FlowRouter в качестве маршрутизатора для приложения Meteor/React, которое я пытаюсь создать. Мне очень трудно заставить мои реагирующие компоненты отображаться в определенных местах. Кто-нибудь знает как это сделать?

Итак, на моей целевой странице, когда я нажимаю кнопку, я хочу перейти на дополнительную страницу. У меня есть три разных компонента, которые я хочу отображать в определенных частях страницы. Я использую ReactLayout.render(), но не могу убедиться, что компоненты отображаются в определенных областях. Я думал, что document.getElementById сработает

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

но это не так.


reactjs meteor routing flow-router
person G.L.3    schedule 08.02.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Второй параметр 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 /> } );
  }
});
person Stephen Woods    schedule 09.02.2016