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

问题描述

将 Meteor 1.3 中的一些代码转换为 ES6+ React 语法.组件需要获取 Meteor 数据，所以我使用 createComponent 来替换 getMeteorData().问题是，旧的 getMeteorData 使用了组件中的状态，而 createContainer 组件无法访问该状态.

旧代码:

Component = React.createClass({混合:[ReactMeteorData]，getMeteorData() {var mo = this.state.currentMonth;var start = newDate(moment(mo).startOf('month'));返回 {事件:collections.events.find({$或:qwry，开始日期:{ $gte:开始}，结束日期:{ $lte:结束}}).拿来()，}},使成为() {...}});

迄今为止的新代码

class Component = React.Component {构造函数(道具){超级(道具)；}使成为() {...}}导出默认 createContainer(({params}) => {var mo = this.state.currentMonth;var start = newDate(moment(mo).startOf('month'));返回 {事件:collections.events.find({$或:qwry，开始日期:{ $gte:开始}，结束日期:{ $lte:结束}}).拿来()，}}， 零件);

收到错误无法获取未定义的 currentMonth"，因为它正在尝试访问状态.有什么建议吗?

解决方案

您可以将旧组件拆分为两个部分组件:一个保存状态并处理事件，一个只显示结果.确保将事件处理程序作为回调传递给子组件.还要注意父组件如何使用 createContainer() 函数的返回值.

//父组件，setState 应该到这里导出默认类 StateHolder 扩展 React.Component {构造函数(参数){超级(参数)；this.state = {myKey: 1};}增量键(){this.setState({myKey: this.state.myKey + 1});}使成为() {return <Container myKey={this.state.myKey} onClick={this.incrementKey.bind(this)}/>;}}//子组件，只渲染class PureComponent 扩展了 React.Component {使成为() {返回 
{this.props.myValue}<button onClick={this.props.onClick}>点击我</button>
;}}//装饰的子容器.//确保在父组件的 render() 函数中使用这个！让容器 = createContainer((道具) => {让 doc = MyCollection.findOne({someKey: props.myKey});返回 {我的价值:文档?doc.someValue : 空}}, 纯组件);

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.

Old code:

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() {
   ...
  }
});

New Code Thus Far

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

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

解决方案

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

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