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

我这里有一个简单的设置：

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

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

这是当前设置，请查看 https://i.stack.imgur.com/L7izb.png

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

我见过与我的问题类似的解决方案和教程，但它们对我来说不太有意义。我一整天都在忙于解决这个问题，期间还开会。

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

当你想让 2 个孩子交流或共享一些数据时，在 React 中的方法是提升状态 (source https://facebook.github.io/react/tutorial/tutorial.html#lifting-state-up).

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

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

这是一个应该执行您想要的操作的示例：

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