如何在 React 组件中更改 Blaze 模板的属性答案

【问题标题】：How to change the properties of a Blaze Template inside a React Component如何在 React 组件中更改 Blaze 模板的属性
【发布时间】：2016-12-07 00:50:01
【问题描述】：

我在我的 React + Meteor 项目中使用 Accounts UI 流星包，并希望使用属性 align="right" 呈现 loginButtons 模板。在 Blaze 中，代码只是 {{> loginButtons align="right"}}，但我不知道如何在 React 中添加此属性。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Template } from 'meteor/templating';
import { Blaze } from 'meteor/blaze';

export default class AccountsUIContainer extends Component {
  componentDidMount() {
  this.view = Blaze.render(Template.loginButtons, // How do I give loginButtons `align="right`?
    ReactDOM.findDOMNode(this.refs.container));
  }

  componentWillUnmount() {
    Blaze.remove(this.view);
  }

  render() {
    return <span ref="container" />;
  }
}

我认为Blaze.renderWithData() 可能是解决方案的一部分，但我用这种方法进行的测试到目前为止还没有奏效。我还认为人们之前已经创建了在 React 中使用 Blaze 模板的解决方案，但我不确定这些替代解决方案是否是在 Meteor 1.4 中解决此问题的“正确”方法。

【问题讨论】：

标签： meteor reactjs meteor-accounts meteor-react

【解决方案1】：

答案就在文档中。先meteor add gadicc:blaze-react-component，再在组件中

import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';

const App = () => (
  <div>
    <Blaze template="loginButtons" align="right" />
  </div>
);

【讨论】：