子コンポーネントから状態が必要な流星データの扱い方は？

Question

Meteor 1.3でいくつかのコードをES6 + React構文に切り替える。コンポーネントはMeteorデータを取得する必要があるので、getMeteorData（）を置き換えるためにcreateComponentを使用しています。問題は、古い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を得ることができません"。助言がありますか？

Answer 1

古いコンポーネントを、状態を保持しイベントを処理する部分コンポーネントと、結果を表示するだけの純粋なコンポーネントの2つの部分コンポーネントに分割することができます。子コンポーネントへのコールバックとしてイベントハンドラを渡すことを確認してください。親コンポーネントが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's render() function! 
let Container = createContainer((props) => { 
    let doc = MyCollection.findOne({someKey: props.myKey}); 
    return { 
    myValue: doc ? doc.someValue : null 
    } 
}, PureComponent);