在分离的反应组件之间共享状态

Question

我是一个新的react用户，我正试图从组件a函数中获取组件B中的值。我不知道是否有可能像这里介绍的那样，用一种简单的方式来获得值。我在B中的代码类似于：

import React, { Component } from 'react';
class B extends Component { 
constructor(props){
super(props)
this.state = { 
value: 0
}
}
setValue = async(newValue) => {
this.setState({value: newValue})
}
getValue = async() => {
return this.state.value
}
render() {
return(
<div className = "flex justify-center">
<div className = "w-1/2 flex flex-col pb-12">
<form onSubmit={(event) => {
event.preventDefault()
const value = this.value.value
this.setValue(value)
}}>
<input type="text"
className="form-control mb-1"
placeholder="New Value"
ref={(input) => this.value= input} />
<input type="submit"
className="bbtn btn-block btn-primary btn-sm"
value="Set Value" />
</form> 
</div>  
</div>
)}
} export default B

我想在A组件中做的是：

import React, { Component } from 'react';
import './B'
class A extends Component { 
getValue = async() => {
const valueInB = B.getValue()
console.log("Value in B is: ", valueInB);
}
render(){
return(
<form onSubmit={(event) => {
event.preventDefault()
this.getValue()
}}>
<input type="submit"
className="bbtn btn-block btn-success btn-sm"
value="Get Value" />
</form>
)
}
} export default A

我知道getValue((函数中的代码是错误的，但这是一种显示我想在a组件中获得的值的方法。

Answer 1

为了在这里提供最佳答案，我们需要考虑两个组件之间的关系。

例如，如果两个组件最终都由单个父组件呈现，那么管理这一点的一种简单方便的方法就是简单地将state移动到父组件，并将其作为道具与setState方法或专用函数一起传递给子组件，以处理相关逻辑。

示例：

class Parent extends Component {
constructor(props) {
super(props)
this.state = { 
value: 0
}
}
return (
<A state={this.state} setState={this.setState} />
<B state={this.state} setState={this.setState} />
)
}

但是，如果不是这样，并且它们之间的关系更为复杂，
则您可能需要管理一些全局状态
这可以通过React内置的Context Api或第三方状态管理库(如Redux或xState(实现。

Answer 2

Context API是最简单的解决方案，因为它是React本身的一部分。

1. 存储共享数据&它的mutator方法处于最顶层组件的状态
2. 在最上面的组件中，通过Provider渲染状态
3. 在需要该共享数据的组件中，呈现Subscriber，&访问/修改数据

本教程非常有用，因为它描述了基于类的&功能组件和示例。