📜  在 ReactJS 中提升状态

📅  最后修改于: 2022-05-13 01:56:41.951000             🧑  作者: Mango

在 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;


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;


Javascript
import React,{ Component } from 'react';
  
class C extends Component {
  
render() {
    return (
        

Output: {this.props.text}

    ); } }        export default C;


文件名-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 中的文本。