3

我期待 Meteor 1.3，这样我就可以导入 React 组件，而不是将它们作为全局变量。

一直在关注本教程（https://voice.kadira.io/getting-started-with-meteor-1-3-and-react-15e071e41cd1），我注意到我将不得不使用 React-mounter 而不是 React-Layout 从卡迪拉

在这些文档中：

https://github.com/kadirahq/react-mounter

我看到 React 组件是这样定义的：

const MainLayout = ({content}) => (
    <div>
      <header>
        This is our header
      </header>
      <main>
        {content}
      </main>
    </div>
);

而不是这样的

MainLayout = React.createClass({
  propTypes: {
    content: React.PropTypes.element
  },
  render() {
    return (
      <div>
        <header>
          This is our header
        </header>
        <main>
          {this.content}
        </main>
      </div>
    );
  }
});

你能帮我解释一下这里发生了什么吗？另外我该如何使用这种新风格？在哪里定义所有的属性、方法、mixin 等？

另外作为一个附带问题，我注意到 React 是作为 npm 包添加的，而不是使用Meteor add react. 这是我们现在应该如何添加反应的方式吗？

4

1 回答 1

4

您可以将组件分为两种类型：容器和展示组件。

有关更多详细信息，请参阅此

React v0.14 引入了称为功能组件的东西，它们是通过函数而不是类实例创建的表示组件。由于它们是表示组件，它们不打算有更多的方法或混合或任何东西，它们只是显示数据。

如果你想坚持使用 React v0.14 和 ES2015，你可以创建你的组件，比如

class Component extends React.Component {
  componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps', nextProps.data.bar);
  }
  render() {
    return <div>Bar {this.props.data.bar}!</div>;
  }
}

您现在拥有一个完整的组件，它可以具有状态、其他事件处理程序和其他方法。

这里要注意的一个非常重要的事情是 ES2015 语法不允许 mixins，因为它们更喜欢继承或函数组合。

希望有帮助！

抱歉，我不能帮你解决你的问题，没有使用 React 和 Meteor。

于 2016-02-15T23:24:13.953 回答