Wie wird mit Meteor Data verfahren, die einen Status von einer untergeordneten Komponente erfordert?

Question

Umschalten einiger Code in Meteor 1.3 zu ES6 + React Syntax. Für die Komponente müssen Meteor-Daten abgerufen werden. Daher verwende ich createComponent, um getMeteorData() zu ersetzen. Das Problem ist, dass der alte getMeteorData-Status aus der Komponente stammt, auf die die createContainer-Komponente nicht zugreift.

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

Neuer Code So 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); 

gibt es die Fehlermeldung "kann nicht currentMonth undefinierten bekommen", da es versucht, Zustand zugreifen. Irgendwelche Vorschläge?

Answer 1

Sie können die alte Komponente in zwei Teilkomponenten aufteilen: eine, die den Status enthält und Ereignisse behandelt, und eine reine, die nur Ergebnisse anzeigt. Stellen Sie sicher, dass Ereignishandler als Rückrufe an die untergeordnete Komponente übergeben werden. Beachten Sie auch, wie die übergeordnete Komponente den Rückgabewert der createContainer()-Funktion verwendet.

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