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

前端之家收集整理的这篇文章主要介绍了使用React在Meteor中使用createContainer做什么?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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);
使用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)

原文链接:https://www.f2er.com/react/301118.html

猜你在找的React相关文章