React 是一种流行的前端框架，它采用了单向数据流的模式。在 React 中，子组件通过 props 接收来自父组件的数据，并且不能直接修改父组件的状态。但是，在某些情况下，我们可能需要在子组件中触发一个事件，然后将结果传递回父组件以更新其状态。本文将介绍如何在 React 中实现此功能。
使用回调函数
React 父组件可以将一个回调函数作为 props 传递给子组件，当子组件触发事件时调用该回调函数并传递数据。这样，父组件就可以通过这个回调函数更新自己的状态。以下是示例代码：
-- -------------------- ---- -------
------ - -------- - ---- --------
-------- ----------------- -
----- --------- ----------- - -------------
-------- ---------------------- -
-----------------
-
------ -
-----
---------- ---- ------ -------------
--------------- -------------------------- --
------
--
-
-------- --------------------- -
----- ----------- - -- -- -
-------------------- ---- --------
--
------ ------- --------------------------- ------------
-在上面的示例代码中，ParentComponent 包含一个名为 message 的状态和一个名为 handleChildClick 的回调函数。ChildComponent 接收一个名为 onClick 的 props 属性，该属性是一个函数。当 ChildComponent 中的按钮被点击时，将调用 onClick 函数并传递一条消息。在 ParentComponent 中，我们将 handleChildClick 作为一个 props 属性传递给 ChildComponent，以便在子组件触发事件时更新 message 状态。
使用 React Context
如果您的组件树较深，那么将回调函数传递到每个子组件可能会变得繁琐和冗余。这时，您可以使用 React Context 来实现全局状态管理，在组件之间共享数据。以下是示例代码：
-- -------------------- ---- -------
------ - -------------- ----------- -------- - ---- --------
----- -------------- - ------------------
-------- ----------------- -
----- --------- ----------- - -------------
------ -
------------------------ -------- -------- ---------- ---
-----
---------- ---- ------ -------------
--------------- --
------
--------------------------
--
-
-------- --------------------- -
----- - ---------- - - ---------------------------
----- ----------- - -- -- -
----------------- ---- --------
--
------ ------- --------------------------- ------------
-在上面的示例代码中，我们创建了一个名为 MessageContext 的上下文对象，并定义了一个名为 setMessage 的函数。在 ParentComponent 中，我们将 message 和 setMessage 作为值传递给 MessageContext.Provider。在 ChildComponent 中，我们通过 useContext 钩子来访问 setMessage 函数，并在事件处理程序中调用它来更新全局状态。
结论
在 React 中更新父组件的状态可以通过回调函数或 React Context 来实现。使用回调函数可以将数据从子组件传递到父组件，但对于组件树较深的情况可能会变得繁琐。React Context 可以在组件之间共享数据，并且避免了 props 属性的冗余传递。希望这篇文章能够帮助您更好地理解如何在 React 中更新父组件的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11464
