在 ReactJS 中提升状态

先决条件：ReactJs、状态、道具

提升状态：众所周知，React 中的每个组件都有自己的状态。因此，有时数据可能是冗余且不一致的。因此，通过提升状态，我们将父组件的状态作为单一事实来源，并将父组件的数据传递给其子组件。

使用提升状态的时间：如果“父子组件”或“表亲组件”中的数据不同步。

示例 1：如果我们的 App 中有 2 个组件。 A -> B其中，A 是 B 的父级。在组件 A 和 B 中保留相同的数据可能会导致数据不一致。

示例 2：如果我们的 App 中有 3 个组件。

A
       / \
      B   C

其中 A 是 B 和 C 的父级。在这种情况下，如果组件 B 中只有一些数据，但是组件 C 也想要该数据。我们知道组件 C 无法访问数据，因为组件只能与其父级或子级（不是表亲）对话。

问题：让我们用一个简单但通用的例子来实现它。我们正在考虑第二个例子。

完整的文件结构：

方法：为了解决这个问题，我们将组件 B 和组件 C 的状态提升到组件 A。通过更改 index.js 文件中 App 的路径，使 A.js 成为我们的 Main Parent

前：

import App from './App';

后：

import App from './A';

文件名-A.js：

Javascript

import React,{ Component }  from 'react';
import B from './B'
import C from './C'
   
class A extends Component {
  
  constructor(props) {
    super(props);
    this.handleTextChange = this.handleTextChange.bind(this);
    this.state = {text: ''};
  }
  
  handleTextChange(newText) {
    this.setState({text: newText});
  }
   
  render() {
    return (
        
          
          
        
    );
  }
}
  
export default A;

---

文件名-B.js：

Javascript

import React,{ Component } from 'react';
  
class B extends Component {
  
constructor(props) {
    super(props);
    this.handleTextChange = this.handleTextChange.bind(this);
}
  
handleTextChange(e){
    this.props.handleTextChange(e.target.value);
}
  
render() {
    return (
        
    );
}
}
      
export default B;

文件名-C.js：

Javascript

import React,{ Component } from 'react';
  
class C extends Component {
  
render() {
    return (
        
Output: {this.props.text}
    );
}
}
      
export default C;

输出：现在，组件 C 可以通过组件 A 访问组件 B 中的文本。