Как обрабатывать данные Meteor, которые требуют состояния от дочернего компонента?

Переключение некоторого кода в Meteor 1.3 в синтаксис ES6 + React. Компонент требует получения данных Meteor, поэтому я использую createComponent для замены getMeteorData(). Проблема в том, что старое getMeteorData использовало состояние из компонента, к которому не обращается компонент createContainer.

Старый код:

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

Получение ошибки "не может получить currentMonth из undefined", поскольку она пытается получить доступ к состоянию. Любые предложения?

Ответы

Ответ 1

Вы можете разбить старый компонент на два частичных компонента: один, который содержит состояние и обрабатывает события, и чистый, который просто отображает результаты. Не забудьте передать обработчики событий как обратные вызовы дочернему компоненту. Также обратите внимание, как родительский компонент использует возвращаемое значение функции createContainer().

// 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 render() function!
let Container = createContainer((props) => {
  let doc = MyCollection.findOne({someKey: props.myKey});
  return {
    myValue: doc ? doc.someValue : null
  }
}, PureComponent);