如何在 ReactJS 中将状态提升两个级别？

我们希望将状态提升两个级别，以便当事件发生在较低级别的组件上时，它应该会影响两个级别的状态。例如，有 X、Y、Z 三个组件。X 是组件 Y 的父级，组件 Y 是组件 Z 的父级。

当组件 Z 中发生某些事件时，它应该影响组件 X 的状态，该状态是组件 Z 向上的两级。为此，我们必须将一个函数作为 prop 从组件 X 传递给组件 Y，然后组件 Y 将传递此函数到组件 X 以便组件 X 可以调用该函数并更改组件 X 的状态。

例子：

• X 状态

  this.state={ stateA: "whatever"}

• X中的函数：

  setStateX(newValue){
     this.setState({stateA: newValue});
  }

• 现在将它作为道具传递给 Y

• 在 Y 中：

• 在 Z 中：

  this.props.setStateX("new value of stateX");

调用该函数设置 X 的状态。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

例子：

App.js

import React from 'react'
  
class X extends React.Component {
  
    state = {
        name:"Kapil"
    }
  
    setStateX = (newState) => {
        this.setState({name:newState})
    }
      
    render() {
        return (
        

        
Hi my name is { this.state.name } 
        
        
        );
    }
      
}
class Y extends React.Component {
  
    render() {
        return(
            

                
            
        );
    }
}
class Z extends React.Component {
    render() {
        return(
            

                 {
                    this.props.setStateX("Nikhil")
                }}>click to change state
            
        )
    }
}
export default X;

输出：