Meteor - 在反应模板中渲染火焰模板？答案

【问题标题】：Meteor - rendering a blaze template within a react template?Meteor - 在反应模板中渲染火焰模板？
【发布时间】：2016-03-29 05:32:45
【问题描述】：

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

假设我有一个使用 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 /> 的客户端错误。

【问题讨论】：

标签： meteor reactjs flow-router

【解决方案1】：

嗯，我想通了。

我还想出了如何逆向（如何从 blaze 中渲染反应模板）

所以要从 react 渲染火焰，你需要创建一个包装类：

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

【讨论】：