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>
    );
  }
});

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

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

Answer 1

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

有关详细信息，请参阅this

React v0.14引入了一个名为functional components的东西，它们是通过函数而不是类实例创建的表示组件。由于它们是表示组件，因此它们不具有更多方法或混合或任何东西，它们只显示数据。

如果您想坚持使用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语法不允许使用mixin，因为它们更喜欢继承或功能组合。

希望有所帮助！

抱歉，我无法帮助您解决问题，避免使用React with Meteor。

Answer 2

抱歉，没有足够的声誉将其添加为评论，但第一个React组件看起来就像是用ES6编写的，而第二个是ES5。至于回答你的其余问题，我可以提供很多帮助。我仍然使用ES5风格，因为升级React并且它的依赖关系并不适用于初始传递。希望这会有所帮助。

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

2 个答案: