Question

所以，在React，我们知道我们可以让孩子通过这样的回调与父母沟通：

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。

如果您认为有必要，可以利用Parent mapping over this.props.children内的along 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

你没有提到祖父母。怎么样。

unless s.nil?

当父母的孩子通过祖父母组件中的“孩子”动态定义时，如何在父/子组件之间进行通信？

2 个答案: