如何通過祖父母組件中的「子女」動態定義父母/子女組成部分之間的通信？

Question

所以，在反應過來，我們知道我們可以有孩子通過這樣的回調與家長溝通：

Child = React.createClass({ 
    render() { 
    return (
     <div> 
     <button onClick={this.props.onAction.bind(null, this.props.name)}>Child button</button> 
     </div> 
    ) 
    } 
}); 

Parent = React.createClass({ 
    handleChildAction(name) { 
    alert(`Child button ${name} clicked`); 
    }, 

    render() { 
    return (
     <div> 
     <Child name="robot1" onAction={this.handleChildAction} /> 
     </div> 
    ) 
    } 
}); 

但我不清楚如何可以有這個父母/子女之間的雙向通信一種格式：

Container = React.createClass({ 
    render() { 
    return (
     <Parent> 
     <Child name="robot1" /> 
     <Child name="robot2" /> 
     </Parent> 
    ) 
    } 
}); 

我怎樣才能得到Parent向下發送信息給孩子，並有Child發送信息嗎？

Answer 1

這是一個情況下，我一般儘量避免，但是當父母表示特定類型的孩子的一些容器，或者應該提出一些其他類型的抽象的也可以是有用in certain situations。

當你覺得有必要，你可以利用mapping over this.props.children裏面Parentalong with React.cloneElement給他們傳遞額外的道具。請記住，您應該將this.props.children視爲不透明，並且只能通過React.Children幫助程序進行迭代。例如：

var Child = React.createClass({ 
    render() { 
    return (
     <div> 
     <button onClick={this.handleClick}>Child button</button> 
     </div> 
    ) 
    }, 

    handleClick(e) { 
    this.props.onAction(this.props.name); 
    } 
}); 

var Parent = React.createClass({ 
    handleChildAction(name) { 
    alert(`Child button ${name} clicked`); 
    }, 

    render() { 
    return (
     <div>{React.Children.map(this.props.children, this.renderChild)}</div> 
    ) 
    }, 

    renderChild(child) { 
    return React.cloneElement(child, {onAction: this.handleChildAction}); 
    } 
}); 

var Container = React.createClass({ 
    render() { 
    return (
     <Parent> 
     <Child name="robot1" /> 
     <Child name="robot2" /> 
     </Parent> 
    ); 
    } 
}); 

這裏的a working JSBin演示了該技術：https://jsbin.com/mijune/edit?js,output

Answer 2

你沒有提到祖父母。這個怎麼樣。

Child = React.createClass({ 
    handleAction(name) { 
     this.props.onAction(this.props.name); 
    }, 
    render() { 
     return (
      <div> 
       <button onClick={this.handleAction}>Child button</button> 
      </div> 
     ) 
    } 
}); 

Parent = React.createClass({ 
    getInitialState: function() { return {data: ''}; }, 
    handleChildAction(name) { 
     alert(`Child button ${name} clicked`); 
     this.props.grandParentAction(data); 
    }, 

    render() { 
     return (
      <div> 
       <Child name="robot1" onAction={this.handleChildAction} parentData={this.props.grandParentData} /> 
      </div> 
     ) 
    } 
}); 

GrandParent = React.createClass({ 
    getInitialState: function() { return {data: ''}; }, 
    handleParentAction(name) { 
     alert(`Parent passed ${name}`); 
     this.setState({data: 'newData'}); 
    }, 

    render() { 
     return (
      <div> 
       <Child name="robot1" onAction={this.handleChildAction} parentData={this.state.data} /> 
      </div> 
     ) 
    } 
});