Передача обработчика событий от бабушки и дедушки к компоненту GrandChild в Reactjs

Question

Я понимаю, как передать событие click из родительского компонента в дочерний компонент в React, но не понимаю, как я могу передать его от бабушки и дедушки внуку, не делая родительский клик.

В следующем примере я хотел бы, чтобы родительский div закрылся, щелкнув div grandild.

Вот мой код, который не работает. Спасибо!

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

Похоже, что вам нужно пройти закрытым способом в качестве опоры к компоненту Grandchild (вместо DIV, который оберточной его). Как это, Grandchild не имеет метода 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; 
     } 
    } 
});