引言
在 React 开发过程中，我们可能需要在子组件中读取祖先组件的状态或属性。例如，我们想要在子组件中获取顶层组件的配置信息，这个时候，React 的 Context API 就可以派上用场。在实际的开发中，我们可以自己编写一个 Context Provider 和 Consumer 来实现对于 Context 的操作。但是，对于某些特定的场景，使用 npm 包 react-parent-context 可以更加方便快捷地完成对于 Context 的使用。
react-parent-context 的安装
你可以通过 npm 命令进行安装：
npm install react-parent-context --save
react-parent-context 的使用
react-parent-context 提供了一个名为 ParentContextProvider 的组件，用于包裹需要访问 Context 的子组件。下面我们来详细介绍如何使用 react-parent-context。
传递 Context 给子组件
- 在祖先组件中创建 Context
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ------------- - ---------------------
------- -
----------- ------
--------- ----
--
---------- -- -- --
---在 ConfigContext 中定义了一个初始值（一个具有两个属性的对象），并且让这个 Context 拥有一个 setConfig 方法，以便在某些操作中修改 ConfigContext 中的属性。
- 在祖先组件中渲染
ParentContextProvider
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------------- - ---- -----------------------
------ - ------------- - ---- ------------------
------ ----------------- ---- ----------------------
-------- ----- -
------ -
---------------------- ------------ -------- ------------- ----
------------------ --
------------------------
--
-在 App.js 中将 ConfigContext 传递给 ParentContextProvider，注意这里 contexts 属性需要传递一个数组，即使只有一个 Context 也必须以数组的形式传递。
- 在子组件中访问 Context
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- ------------------
-------- ------------------- -
----- - ------- --------- - - --------------------------------
------ -
-----
-------
----------- -- -
---------------- -- -
------ -
----------
----------- ------------------
-
---
-
-
------ ---- ----
---------
------------------ - ----- ----- - ------ ------
------
--
-在 TopLevelComponent 中通过 useContext 获取到 ConfigContext，并对其中的属性进行读取和修改操作。可以看到，使用 react-parent-context 可以非常方便地实现对于 Context 的操作。
示例代码
完整代码如下：
-- -------------------- ---- -------
-- ----------------
------ ----- ---- --------
------ ----- ------------- - ---------------------
------- -
----------- ------
--------- ----
--
---------- -- -- --
---
-- ------
------ ----- ---- --------
------ - --------------------- - ---- -----------------------
------ - ------------- - ---- ------------------
------ ----------------- ---- ----------------------
-------- ----- -
------ -
---------------------- ------------ -------- ------------- ----
------------------ --
------------------------
--
-
-- --------------------
------ ----- ---- --------
------ - ------------- - ---- ------------------
-------- ------------------- -
----- - ------- --------- - - --------------------------------
------ -
-----
-------
----------- -- -
---------------- -- -
------ -
----------
----------- ------------------
-
---
-
-
------ ---- ----
---------
------------------ - ----- ----- - ------ ------
------
--
-结论
使用 npm 包 react-parent-context 可以更加方便快捷地完成对于 Context 的使用，特别是在组件嵌套较深的情况下。本文介绍了 react-parent-context 的安装和使用方法，并提供了示例代码供读者参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551ef81e8991b448cf6a6