如何从 React Hooks 中的嵌套子级更改父级的状态？答案

【问题标题】：How to change state of parent from nested child in React Hooks?如何从 React Hooks 中的嵌套子级更改父级的状态？
【发布时间】：2021-08-15 23:11:54
【问题描述】：

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

1.Parent调用Child1

2.Child1 调用 Child2

3.Child2 调用 Child3

4.Child3

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

const[showDialog, setShowDialog] = useState(false);

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

问题是按钮在 Child3 中。那么当我点击最后一个孩子的按钮时，如何改变父母的状态。

【问题讨论】：

提升状态并保持单一事实来源或参考reactjs.org/docs/context.html
和之前的钩子一样——把方法传给孩子？不过，有多种方法可以做到。
我是 React 新手。你能解释一下吗？

标签： reactjs state parent-child

【解决方案1】：

第 1 步 - 在父级中创建一个处理函数，即可以将 showDialogue 状态切换为真或假

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

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

<Child3 onShowDialog={showDialogHandler} />

Step3 : 将通过 prop 传递的函数分配给 onClick vent 处理程序。

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

【讨论】：

父母没有打电话给 Child3.. 电话按我提到的顺序发生

【解决方案2】：

    // Parent.js
    const Parent = () => {
      const [showDialog, setShowDialog] = useState(false);
      
      return (
        <>
          <div>Show Dialog: {showDialog.toString()}</div>
          <Child3 showDialog={showDialog} setShowDialog={setShowDialog} />
        </>
      );
    };


    // Child3.js
    const Child3 = ({showDialog, setShowDialog}) => {
      
      const handleShowDialog = useCallback(() => {
        setShowDialog(!showDialog)
      }, [setShowDialog, showDialog])

      return (
        <>
          <button onClick={handleShowDialog}>Show Dialog</button>
        </>
      );
    };

【讨论】：

在子组件中尝试 useCallback() 钩子
父母没有打电话给 Child3.. 电话按我提到的顺序发生
对，那为什么你不能将Dialog Component 转至Child3？

【解决方案3】：

使用 useContext ,useReducer 钩子，可以使用 useContext, useReducer 而不是将 props 传递给孩子> 钩子通过 onclick 在父级中调度动作，并从上下文中获取真或假响应到 chlld 组件。这是codeSandbox exmaple

【讨论】：