Jak obsługiwać dane meteorytów, które wymagają stanu z komponentu potomnego?

Question

Przełączanie niektórych kodów w Meteor 1.3 na ES6 + Składnia odpowiedzi. Komponent wymaga uzyskania danych Meteor, więc używam createComponent do zamiany getMeteorData(). Problem polega na tym, że stary getMeteorData używał stanu z komponentu, do którego nie ma dostępu komponent createContainer.

Stary kod:

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

Nowy Kodeks dotąd

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

Uzyskiwanie błąd "nie można uzyskać currentMonth undefined", ponieważ próbuje uzyskać dostęp do stanu. Jakieś sugestie?

Answer 1

Stary komponent można podzielić na dwa komponenty: jeden, który przechowuje stan i obsługuje zdarzenia, i czysty, który wyświetla tylko wyniki. Należy przekazać funkcje obsługi zdarzeń jako zwrotne do komponentu potomnego. Zwróć też uwagę, jak komponent macierzysty używa wartości zwracanej funkcji 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);