流星 - 在反应模板中渲染火焰模板？

Question

这应该是一个简单的问题 -

假设我有一个使用 react 包的简单 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 />.

的客户端错误

Answer 1

嗯，我想通了。

我还想出了逆过程（如何从 blaze 中渲染 React 模板）

所以要从 React 渲染火焰，你需要制作一个包装器 class:

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 中定义的 blaze 模板：

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

流星 - 在反应模板中渲染火焰模板？

Meteor - rendering a blaze template within a react template?

meteor

reactjs

flow-router