我正在使用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 />