Question

我在这里设置简单：

我有一个父组件，它有2个子组件附加到此父组件。在第一个子组件中：用户更改输入的值。然后，该变化的值将是我希望从该子传递到父节点的支柱，以便它可以传递给连接到同一父组件的另一个子节点。

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

this the set up currently, please view

从用户输入到UI更改的流程：1。在＆＃34; Child 1＆＃34;：调整滑块，onChange传递值到父组件; 2.将此prop（新滑块值）传递给Parent组件，以便它可以用于＆＃34; Child 2＆＃34;零件; 3.那个prop，valueOfUserInput（新的滑块值）将用于if / else语句中关于样式化＆＃34; Child 2＆＃34;的元素。零件。

我已经看过类似于我的问题的解决方案和教程，但它们对我来说并不合适。我一整天都在乱砍，在会议中穿插。

任何帮助或建议都会令人惊叹。谢谢大家对这个React noob的耐心等待。

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

Answer 2

你的图表是有道理的，我想我知道你错过的关键部分。 Child 1将支柱传递给父母的想法是部分正确的...但是你如何通过该支柱是你必须将一个函数从父母传递到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通过设置其状态来处理事件，然后它可以将其传递给任何人。希望这是有道理的，但这应该是一个有用的开始。

Answer 3

我个人会使用react-redux来进行这种沟通。 Redux是一个高级别的全球州经理。您可以修改和访问任何组件的reducer值。请随意查看我制作的样板：https://github.com/rjzheng/REWBoilerplate/。如果您查看＆＃39; / app＆＃39;，您可以在＆＃39; / reducer＆＃39;中查看所有内容的设置方式。和＆＃39; / store＆＃39;文件夹。要了解如何使用它们，请在http://redux.js.org/docs/basics/UsageWithReact.html上找到相关的非常全面的文档。

Answer 4

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

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

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

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

4 个答案: