Метеор - рендеринг шаблона пламени в шаблоне реакции?

Это должен быть простой вопрос -

Скажем, у меня есть простое приложение Meteor, использующее пакет реагирования.

У меня есть файл root.html и поток-маршрутизатор, который отображает шаблон JSX на маршруте «/».

Скажем, я хочу, чтобы мой шаблон JSX встраивал blaze-template.

Как бы я это сделал?

Возьмем, к примеру, следующий код:

# test.js
<template name="Test">
Hello world
</template>

...

# root.jsx
Root = React.createClass({
  render() {
    return(
      <div>
      {this.props.content}
      </div>
    )
  }
})

...

# routes.jsx
FlowRouter.route("/", {
  name: "root",
  action: function(params, queryParams) {
    ReactLayout.render(Root,
      {content: <Test />})
  }
})

Но с этим кодом я получаю сообщение об ошибке на стороне клиента о том, что не могу найти <Test />.


reactjs meteor flow-router
person max pleaner    schedule 28.03.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

А, хорошо, я понял это.

Я также понял, как обратное (как рендерить шаблоны реакции изнутри blaze)

Итак, чтобы отрендерить пламя из реакции, вы создаете класс-оболочку:

AccountsWrapper = React.createClass({
  componentDidMount() {
    this.view = Blaze.render(Template.Accounts,
      React.findDOMNode(this.refs.container));
  },
  componentWillUnmount() {
    Blaze.remove(this.view);
  },
  render() {
    // Just render a placeholder container that will be filled in
    return <span ref="container" />;
  }
});

Это ссылка на шаблон пламени, определенный в accounts.html:

<template name="Accounts">
  {{> loginButtons }}
  <div>
    {{> React component=Test}}
  </div>
</template>

В моем файле маршрутов я отображаю шаблон оболочки следующим образом:

FlowRouter.route("/", {
  name: "root",
  action: function(params, queryParams) {
    ReactLayout.render(Root,
      {content: <AccountsWrapper />})
  }
})

Вы также можете видеть, что в моем шаблоне blaze я звоню

{{> React component=Test}}

Это зависит от пакета react-template-helper, и я оборачиваю шаблон реакции, используя следующий код (в JSX:

Test = React.createClass({
  render() {
    return <div>
    WORKING
    </div>
  }
})

if (Meteor.isClient) {
  Template.Accounts.helpers({
    Test() {
      return Test;
    }
  })
}
person max pleaner    schedule 28.03.2016