如何通过祖父母组件中的“子女”动态定义父母/子女组成部分之间的通信？

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