Meteor React - 为什么 React 组件在 React Mounter 和 React Layout 中的

Question

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

一直在遵循本教程(https://voice.kadira.io/getting-started-with-meteor-1-3-and-react-15e071e41cd1(，我注意到我将不得不使用 React-mounter 而不是 Kadira 的 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>
    );
  }
});

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

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

Answer 1

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

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

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 语法不允许混合，因为它们更喜欢继承或功能组合。

希望对您有所帮助！

抱歉，我无法帮助您解决您的附带问题，尚未将 React 与 Meteor 一起使用。