向 React 组件添加模板

Question

我正在使用 Meteor React 教程中的登录示例

meteor add accounts-ui accounts-password

一切正常，但我试图找到文件并更改它，但我不知道它在哪里。

这是我的代码：

    import { Blaze } from 'meteor/blaze';

export default class AccountsUIWrapper extends Component {

  componentDidMount(){
    this.view = Blaze.render(Template.loginButtons,
    ReactDOM.findDOMNode(this.refs.container));
  }

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

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

而且我已经安装了 meteor add useraccounts:materialize 我怎样才能把模板放在这个上面？

Answer 1

您需要将组件放入 /imports/ui/ 目录并将文件命名为 AccountsUIWrapper.jsx

所以会保存为/imports/ui/AccountsUIWrapper.jsx.

然后您可以在 /imports/ui/App.jsx 文件中导入您的包装组件：

import AccountsUIWrapper from './AccountsUIWrapper.jsx';

然后在与以下文件相同的文件中的 React 渲染函数中使用它：

<AccountsUIWrapper />

教程对其进行了布局 pretty clearly，包括所有文件名和位置。您应该能够访问他们的 GitHub 存储库。

如果需要，您还可以查看 my code 在我自己完成本教程时的这一特定步骤。

更新：对于useraccounts:materialize

您提到的 useraccounts:materialize 包 depends on useraccounts:core 包作为其基础。所以你不能直接将 useraccounts:materialize 应用到默认的 meteor accounts 包。

按照 useraccounts:core 上的说明进行设置。您可能还需要删除 accounts-ui，因为它可能会与上述软件包发生冲突。

然后，通过 documentation for useraccounts 了解如何在 Blaze 中呈现他们的帐户模板。

之后，使用教程中显示的相同方法，您应该能够为 useraccounts:materialize Blaze 模板创建一个新的 React 包装器。

这里是 Iron Router 和 Flow Router 样板 useraccounts:materialize 代码的链接。从这些您可以参考 Blaze 模板代码，然后您可以将其包装在 React 中：

向 React 组件添加模板

Adding a template to React Component

meteor-accounts