Come gestire Meteor Data che richiede lo stato dal componente figlio?

Question

Passaggio di un po 'di codice in Meteor 1.3 a ES6 + Sintassi di reazione. Il componente richiede l'acquisizione di dati Meteor, quindi sto utilizzando un componente create per sostituire getMeteorData(). Il problema è che il vecchio stato getMeteorData utilizzato dal componente, a cui non si accede dal componente createContainer.

vecchio codice:

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

Nuovo Codice finora

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

ottenere l'errore "non può ottenere currentMonth di indefinito," dal momento che sta cercando di accedere a Stato. Eventuali suggerimenti?

Answer 1

È possibile dividere il componente precedente in due componenti parziali: uno che contiene lo stato e gestisce gli eventi e uno puro che visualizza solo i risultati. Assicurati di passare i gestori di eventi come richiami al componente figlio. Notare inoltre come il componente principale utilizza il valore restituito della funzione 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);