Question

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

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

Answer 1

好吧，我想出来了。

我还想出了反向（如何从大火内反射模板）

因此，为了从反应中渲染出火焰，你需要创建一个包装类：

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

您还可以在我的火焰模板中看到我正在调用

{{> React component=Test}}

这取决于react-template-helper包，我使用以下代码包装react模板（在JSX中：

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

if (Meteor.isClient) {
  Template.Accounts.helpers({
    Test() {
      return Test;
    }
  })
}

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

1 个答案: