将值从一个子组件传递到另一个组件-React

Question

Iam正在尝试从一个子组件到另一个子组件获取值。我有一个思考过程，但作为一个中间人，我无法实现它。

思想是这样的：当用户选择(比如a.js(的下拉组件时，其效果应该在(比如B.js(中可见。我知道React Redux的回调函数，并查看了文档，但无法在我的代码中实现它。

这是我的代码和相关信息，请帮助获得所需的输出。PS：请原谅缩进。

A.js

class sidebar extends Component {
constructor(props) {
super(props);
this.state = {
value: 'None' 
}
};
}
...
...
OnChange(event) {
this.setState({ value: event.currentTarget.value })
};

render() {
return (
<div>
<select 
onChange={(event) => this.OnChange(event)}
className="form-control">
<option>Please select a role</option>
<option value ="a">a</option>
<option value ="b">b</option>
<option value ="c">c</option>                            
</select>
<p>role select is: {this.state.value}</p>
</div>)
}

B.js

class projectStatus extends Component {
constructor(props) {
super(props);
this.state = {
...
...
};
}
render() {
const receiveValue = (value) => {console.log("value received from A",value)}
return(
<LoadingOverlay
receiveValue={receiveValue}>
<p>{this.state.receiveValue} </p>
</LoadingOverlay>
)}

Answer 1

react有一个概念，称为提升状态向上，它包括移动父组件的状态/道具，以便通过将其作为道具传递下去，在其子组件之间共享。

为了更好地解释它，您应该将value状态和OnChange函数共同移动到父组件，并将其作为道具传递给组件A和B，这样它们就可以使用相同的值。

另一种方法是将组件编写为功能组件，并使用ContextAPI在应用程序中全局共享状态。

Answer 2

由于您不想使用redux，因此可以提升您的状态。因此，这个想法是在最低共同祖先中定义您的特定属性。

假设，这是你的继承权：D->X->C->

F->X->E->B

因此，在这种情况下，您希望属性与X一起存在。您在X中定义一个函数，并将其作为X级的子组件(a&B(的道具。然后在进行更改时触发子组件中的特定函数。你可以想象所有的调用都会到达X，你可以改变你传递给C和E的特定道具，这两个道具分别传递给A和B。