React：如何将道具从孩子传递给父母到另一个孩子？答案

【问题标题】：React: how to pass props from child to parent to another child?React：如何将道具从孩子传递给父母到另一个孩子？
【发布时间】：2018-02-07 11:58:05
【问题描述】：

我在这里做了一个简单的设置：

我有一个父组件，它有 2 个子组件附加到该父组件。在第一个子组件中：用户更改输入的值。然后，该更改的值将是我想从该子组件传递给父组件的道具，以便可以将其传递给附加到同一父组件的另一个子组件。

Main (parent component)___|
                          |_Child 1
                          |_Child 2

this the set up currently, please view

从用户输入到UI变化的流程： 1.在“Child 1”中：调整一个滑块，onChange将值传给父组件； 2.将这个prop（新的滑块值）传递给Parent组件，以便它可以被“Child 2”组件使用； 3. 该道具 valueOfUserInput（新的滑块值）随后将用于关于设置“Child 2”组件元素样式的 if/else 语句。

我看到了与我的问题类似的解决方案和教程，但它们对我来说不太有意义。我整天都在忙这件事，还穿插着会议。

任何帮助或建议都会很棒。感谢大家对这个 React 菜鸟的耐心等待。

【问题讨论】：

标签： reactjs

【解决方案1】：

当你想让 2 个孩子交流或共享一些数据时，在 React 中实现的方法是提升状态 (source)。

这意味着子级使用的状态应该存在于父级中。然后父母将状态传递给孩子。

要从子级中的操作更新状态，通常的模式是从父级传递一个函数，该函数在子级执行该操作时被调用。

这是一个应该做你想做的事的例子：

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { valueOfUserInput: '' };
  }

  handleUserInputChange = event => {
    this.setState({
      valueOfUserInput: event.target.value,
    });
  };

  render() {
    const { valueOfUserInput } = this.state;
    return (
      <div>
        <Child1 valueOfUserInput={valueOfUserInput} onUserInputChange={this.handleUserInputChange} />
        <Child2 valueOfUserInput={valueOfUserInput} />
      </div>
    );
  }
}

class Child1 extends React.Component {
  render() {
    const { valueOfUserInput, onUserInputChange } = this.props;
    return <input type="text" value={valueOfUserInput} onChange={onUserInputChange} />;
  }
}

class Child2 extends React.Component {
  render() {
    const { valueOfUserInput } = this.props;
    return (
      <div>
        {valueOfUserInput}
      </div>
    );
  }
}

【讨论】：

【解决方案2】：

您的图表有点道理，我想我知道您缺少的关键部分。 Child 1 将 prop 传递给父级的想法部分正确……但是传递该 prop 的方式是必须将函数从父级传递给 Child 1。所以在父母中，你会有类似...

handleChange(val) {
  this.setState({ blah: val }) // you are going to pass blah down to Child 2
}

然后在Parent 中的渲染函数中，你将这个函数向下传递...

<Child 1 onChange={this.handleChange} />

在 `Child 1 内部，您需要调用该函数。

<input onChange={this.props.onChange(val)} />

Child 1 现在是“嘿，家长，我变了，我在这里得到了一些价值，剩下的交给你”。 Parent 通过设置状态来处理事件，然后它可以将其传递给任何人。希望这是有道理的，但这应该是一个有用的开始。

【讨论】：

【解决方案3】：

我个人会使用 react-redux 来进行这种交流。 Redux 在高层次上是一个全局状态管理器。您可以从任何组件修改和访问 reducer 值。随意看看我制作的样板：https://github.com/rjzheng/REWBoilerplate/。如果您在“/app”下查看，您可以看到“/reducer”和“/store”文件夹中的所有设置。要了解如何使用它们，http://redux.js.org/docs/basics/UsageWithReact.html 上有一个非常全面的文档。

【讨论】：

【解决方案4】：

您可以将一个函数从父级传递给两个子级，以允许设置值。您可能希望将该值作为另一个属性传递。父级中的函数应使用此新值调用 setState，这将导致重新渲染自身和任何子级。

因此以这种方式更新值并传递给另一个孩子。

如果您使用的是 redux，您也可以这样做，因为它旨在允许在组件之外进行状态管理。

【讨论】：