React独立组件间状态共享：如何从组件A获取组件B的状态值

你当前的写法错误在于：直接调用B.getValue()是试图调用类的静态方法，但getValue是组件B的实例方法，必须通过组件B的实例才能调用，因此这种方式无效。下面给你两种简便的实现方案：

方案一：状态提升（React官方推荐） #

遵循React单向数据流原则，把组件B的状态提升到两者的共同父组件中，组件B负责更新状态，组件A负责读取状态。这种方式最符合React的设计理念，也便于后续维护。

1. 新建共同父组件（示例：App.js） #

import React, { Component } from 'react';
import A from './A';
import B from './B';

class App extends Component {
  state = {
    value: 0
  };

  setValue = (newValue) => {
    this.setState({ value: newValue });
  };

  render() {
    return (
      <div>
        <B setValue={this.setValue} />
        <A currentValue={this.state.value} />
      </div>
    );
  }
}

export default App;

2. 修改组件B #

移除自身状态，通过props接收父组件的setValue方法：

import React, { Component } from 'react';

class B extends Component { 
  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.props.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;

3. 修改组件A #

通过props接收父组件传递的状态值：

import React, { Component } from 'react';

class A extends Component { 
  getValue = () => {
      console.log("Value in B is: ", this.props.currentValue);
  };

  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;

方案二：使用Ref获取组件B实例（适合简单场景） #

如果不想做状态提升，可以通过React的ref获取组件B的实例，直接调用其getValue方法。注意这种方式会打破单向数据流，仅适合小型项目或简单场景。

1. 父组件中给B添加ref，并传递方法给A #

import React, { Component } from 'react';
import A from './A';
import B from './B';

class App extends Component {
  bRef = React.createRef();

  getBValue = () => {
    return this.bRef.current.getValue();
  };

  render() {
    return (
      <div>
        <B ref={this.bRef} />
        <A getBValue={this.getBValue} />
      </div>
    );
  }
}

export default App;

2. 修改组件A #

调用父组件传递的方法获取B的状态：

import React, { Component } from 'react';

class A extends Component { 
  getValue = () => {
      const valueInB = this.props.getBValue();
      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;

额外注意点 #

• 你的组件A中import './B'写法错误，应改为import B from './B'，否则无法正确引入组件类。
• setValue和getValue方法不需要加async关键字（setState是异步但这里不需要await），可以去掉简化代码。

内容的提问来源于stack exchange，提问作者Superxi