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

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

有关详细信息，请参阅 this

React v0.14 引入了一种叫做 functional components 的东西，它是通过函数而不是 class 实例创建的表示组件。因为它们是展示组件，所以它们不打算有更多的方法或混合或任何东西，它们只是显示数据。

如果你想坚持使用 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 with Meteor。

Meteor React - 为什么 React 组件在 React Mounter 和 React Layout 中的定义不同？

Meteor React - Why are React Components defined differently in React Mounter vs React Layout from Kadira?

meteor

reactjs

meteor-react