reactjs - react : how to pass props from child to parent to another child?

Question

我在这里进行了简单的设置:

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

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

this the set up currently, please view

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

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

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

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