1

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

假设我有一个使用 react 包的简单 Meteor 应用程序。

我有一个 root.html 文件，并且有一个 flow-router，它在“/”路由上呈现一个 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 />。

4

1 回答 1

3

嗯，我想通了。

我还想出了相反的情况（如何从 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" />;
  }
});

这引用了定义在中的 blaze 模板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;
    }
  })
}
于 2016-03-28T21:32:45.617 回答