Übergabe Event Handler von Grandparent zu GrandChild Component in Reactjs

Question

Ich verstehe, wie ein Click-Ereignis von einer übergeordneten Komponente an eine untergeordnete Komponente in React übergeben, aber nicht verstehen, wie ich es von einem Großeltern zu einem Enkelkind ohne zu machen übergeben kann die Eltern anklickbar.

Im folgenden Beispiel möchte ich, dass das Eltern-Div beim Klicken auf das Enkel-Div schließt.

Hier ist mein Code, der nicht funktioniert. Danke!

var Grandparent = React.createClass({ 
    getInitialState: function() { 
    return {open: true}; 
    }, 
    close: function() { 
    this.setState({open: false}); 
    }, 
    render() { 
    var grandparentBox={backgroundColor: 'yellow', height: 400, width: 400}; 
     return <div style = {grandparentBox}><Parent open={this.state.open} close = {this.close}/></div>; 
    } 
}); 

var Parent = React.createClass({ 
    render() { 
    var parentBox={backgroundColor: 'red', height: 100, width: 100}; 
     if (this.props.open == true) { 
      return <div close={this.props.close} style = {parentBox}><Grandchild/></div> 
     } 
     else { 
     return null; 
     } 
    } 
}); 

var Grandchild = React.createClass({ 
    render() { 
    var grandchildBox={backgroundColor: 'black', height: 20, width: 20, top: 0}; 
     return <div onClick={this.props.close} style = {grandchildBox}></div> 

    } 
}); 

ReactDOM.render(
    <Grandparent/>, 
    document.getElementById('container') 
); 

Answer 1

Es sieht aus wie Sie die close-Methode als Stütze zum Enkelkind Komponente (anstelle des div, dass es Verpackung) übergeben müssen. Wie es ist, hat Enkelkind keine Methode this.props.close ...

var Parent = React.createClass({ 
    render() { 
     var parentBoxStyle = {backgroundColor: 'red', height: 100, width: 100}; 
     if (this.props.open == true) { 
      return <div style={parentBoxStyle}> 
       <Grandchild close={this.props.close} /> 
      </div> 
     } 
     else { 
      return null; 
     } 
    } 
});