Çocuk bileşeninden durum gerektiren Meteor Verileri nasıl kullanılır?

Question

Meteor 1.3'ten ES6'ya bazı kodların değiştirilmesi + React sözdizimi. Bileşen Meteor verilerini almayı gerektirir, bu yüzden getMeteorData() öğesini değiştirmek için bir createComponent kullanıyorum. Sorun, createContainer bileşeni tarafından erişilemeyen eski getMeteorData bileşeninin kullanıldığı durumdur.

Eski kod: o durumuna erişmek için çalışıyor beri

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

Yeni Kod Böylece Uzak

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

hatasını alma "tanımsız bir currentMonth alınamıyor". Baska öneri?

Answer 1

Eski bileşeni iki kısmi parçaya bölebilirsiniz: durumu tutan ve olayları ele alan ve yalnızca sonuçları görüntüleyen saf olanı. Etkinlik işleyicilerini alt bileşen için geri arama olarak iletdiğinizden emin olun. Ayrıca, ana bileşenin createContainer() işlevinin dönüş değerini nasıl kullandığını da not alın.

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