如何处理需要子组件状态的Meteor数据？ [英] How to handle Meteor Data that requires state from child component?

问题描述

将Meteor 1.3中的某些代码切换为ES6 + React语法。组件需要获取Meteor数据，因此我使用createComponent替换getMeteorData（）。问题是，旧的getMeteorData使用了组件中的状态，而createContainer组件没有访问该状态。

Switching some code over in Meteor 1.3 to ES6+ React syntax. Component requires getting Meteor data, so I'm using a createComponent to replace getMeteorData(). The problem is, the old getMeteorData used state from the component, which isn't being accessed by the createContainer component.

旧代码：

Component = React.createClass({
   mixins: [ReactMeteorData],
   getMeteorData() {
    var mo = this.state.currentMonth;
    var start = newDate(moment(mo).startOf('month'));
    return {
     events:     collections.events.find({
        $or:       qwry,
        startDate: { $gte: start },
        endDate:   { $lte: end }
      }).fetch(),
    }
  },
  render() {
   ...
  }
});

新代码到目前为止

class Component = React.Component {
 constructor(props) {
  super(props);
 }
 render() {
  ...
 }
}

export default createContainer(({params}) => {
var mo = this.state.currentMonth;
        var start = newDate(moment(mo).startOf('month'));
        return {
         events:     collections.events.find({
            $or:       qwry,
            startDate: { $gte: start },
            endDate:   { $lte: end }
          }).fetch(),
        }
}, Component);

获取错误无法获取undefined的currentMonth，因为它正在尝试访问状态。有什么建议吗？

Getting the error "cannot get currentMonth of undefined," since it's trying to access state. Any suggestions?

推荐答案

您可以将旧组件拆分为两个部分组件：一个保存状态并处理事件，一个只显示结果的纯粹的。确保将事件处理程序作为回调传递给子组件。另请注意父组件如何使用 createContainer（）函数的返回值。

You can split the old component into two partial components: one that holds the state and handles events, and a pure one that merely displays results. Make sure to pass event handlers as callbacks to the child component. Also note how the parent component uses the return value of the createContainer() function.

// Parent component, setState should go here
export default class StateHolder extends React.Component {
  constructor(params) {
    super(params);
    this.state = {myKey: 1};
  }

  incrementKey() {
    this.setState({myKey: this.state.myKey + 1});
  }

  render() {
    return <Container myKey={this.state.myKey} onClick={this.incrementKey.bind(this)} />;
  }
}

// Child component, renders only
class PureComponent extends React.Component {
  render() {
    return <div>
      {this.props.myValue}
      <button onClick={this.props.onClick}>click me</button>
    </div>;
  }
}

// Decorated child container. 
// Make sure to use this one in parent component's render() function!
let Container = createContainer((props) => {
  let doc = MyCollection.findOne({someKey: props.myKey});
  return {
    myValue: doc ? doc.someValue : null
  }
}, PureComponent);

这篇关于如何处理需要子组件状态的Meteor数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！