Question

我正在使用React教程处理Meteor并尝试了解createContainer（）。从这里阅读：

http://guide.meteor.com/v1.3/react.html#using-createContainer

我认为它是meteor/react-meteor-data中定义的用于数据加载的函数。在这种特定情况下，它从Mini Mongo数据库（此处名为Task）检索数据。我的问题是，createContainer的第二个参数是做什么的？（在此处命名为App）。谢谢！

class App extends Component {
   //...class definition
}

 export default createContainer(() => {
  return {
    //Tasks is a Mongo.Collection
    //returns the matching rows (documents)
    //here we define the value for tasks member
    tasks: Tasks.find({}, { sort: { createdAt: -1} }).fetch(),
  };
}, App);

Answer 1

使用createContainer创建的组件是一个围绕实际组件的简单包装器，但它的强大之处在于它可以处理Meteor的反应性，因此您不必考虑如何保持当您的数据发生变化时（例如订阅加载，ReactiveVar / Session var更改）

，您的所有内容都是最新的

React组件基本上只是一个JavaScript函数，它通过一堆参数（props）调用，并产生一个输出。除非您这样说，否则React不知道您的数据是否已更改。使用createContainer创建的组件将在您的被动数据发生变化时重新呈现，并向您的实际组件发送一组新的道具。

createContainer的选项是一个函数，它返回您想要的反应数据以及要包装的组件。它非常简单，createContainer的渲染功能实际上只有一行：

return <Component {...this.props} {...this.data} />;

它会传递您传递给包装组件的任何道具，并添加您设置的反应数据源。

您可以在此处查看代码：https://github.com/meteor/react-packages/blob/devel/packages/react-meteor-data/createContainer.jsx

<Component {...this.props}语法称为splat，基本上变为：

{
    prop1: 'some value',
    prop2: 'another value'
}

成：

<Component prop1='some value' prop2='another value />

（参见：https://facebook.github.io/react/docs/jsx-spread.html）

Answer 2

问一位同事，这就是我得到的答案：

createContainer的第二个参数是您希望封装数据的类名。然后它将具有“反应数据”，因为每次更改数据库中的数据时，类的道具都会更改包括新数据。

此外，应在类定义之外调用createContainer（）函数。

如果有任何人需要添加，请随时提供帮助。

Answer 3

createContainer的第二个参数是您要在其中传递道具的类的名称。让我们说createContainer返回一个名为firstName的道具现在，只要数据库中有新的firstName条目或更新的firstName，那么createContainer将调用第二个参数，它是我们的类名，它具有它所拥有的支柱，即firstName。

我希望这是有道理的。

使用React在Meteor中使用createContainer做什么？

3 个答案: