Reactjs 如何从React钩子中嵌套的子项更改父项的状态？

我的React应用程序中有3个嵌套组件

1.家长呼叫子女1

2.Child1呼叫Child2

3.Child2呼叫Child3

4.3

我想在用户单击按钮时显示一个弹出对话框。 该对话框位于parent中，我通过设置状态变量来显示它

const[showDialog，setShowDialog]=useState（false）

当用户单击ShowDialog按钮时为真/假

问题是按钮在Child3中。
因此，当我单击最后一个子项中的按钮时，如何在父项中更改状态。
步骤1-在父项中创建处理程序函数，即可以将showDialogue状态切换为true或false

const showDialogHandler=()=>{ 
     setShowDialog(prevState=> !prevstate) 
}

步骤2：将处理程序引用传递给child3

<Child3 onShowDialog={showDialogHandler} />



步骤3：将通过prop传递的函数分配给onClick vent处理程序

<button onClick={props.onShowDailog}>Show Dialog</button>

显示对话框

//Parent.js
常量父项=（）=>{
const[showDialog，setShowDialog]=useState（false）；
返回(
显示对话框：{showDialog.toString（）}
);
};
//Child3.js
常量Child3=（{showDialog，setShowDialog}）=>{
const handleShowDialog=useCallback（（）=>{
setShowDialog（！showDialog）
}，[setShowDialog，showDialog]）
返回(
显示对话框
);
};使用useContext，useReducer钩子，您可以使用useContext，useReducer钩子，通过在父对象中单击来调度操作，并从上下文中获取对CHLD组件的正确或错误响应。这是你的电话号码

提升状态并保持单一真相来源，或者以与之前相同的方式引用钩子——将方法传递给孩子？不过，有多种方法可以做到这一点。我对反应还不熟悉。。您能解释一下吗？在子组件Parent中尝试使用callback（）hook不调用Child3。。调用是按照我刚才提到的顺序进行的，所以为什么不能将
对话框组件
转到
Child3
？父对象不调用Child3。。电话按我提到的顺序进行