什么是 use-inside？
use-inside 是一个轻松使用 React Context API 在 React 应用程序中获取最接近的作用域的 hook。它是 Popper.js 的一部分，旨在帮助创建更灵活的 React Popper 组件。
安装 use-inside
可以通过 NPM 安装 use-inside：
npm install use-inside
使用 use-inside
use-inside 可以在 React 应用程序中的任何组件中使用，以检索其最近的有提供者的作用域。这对于许多常见的使用情况（如弹出框和 UI 组件聚焦）非常有用。
假设我们有以下组件树：
<RootProvider>
<ParentComponent>
<ChildComponent />
</ParentComponent>
</RootProvider>下面是如何使用 use-inside 获取最接近的 RootProvider 的示例：
-- -------------------- ---- -------
------ - --------- - ---- -------------
------ - ----------- - ---- ----------------
-------- ---------------- -
----- ------------ -------------- - -----------------------
------ -
-----
----------- - ------- ------ - ---- ------ -------
------
--
-在上面的示例中，ChildComponent 将使用 useInside hook 检索最接近的 RootProvider，并通过根据存在性渲染不同的文本来验证其是否在作用域内。
教程
步骤 1：创建上下文
首先，我们需要为我们的应用程序建立提供者和相关的上下文。在这个例子中，我们将创建一个名为 RootContext 的上下文。
import React from 'react'; export const RootContext = React.createContext();
步骤 2：创建提供者
在上下文中，我们定义了所有使用它的组件可以访问的变量和方法。接下来，我们需要为这个上下文创建一个提供者。这个提供者将作为所有子组件的祖先，并将包含我们在步骤 1 中定义的上下文。
-- -------------------- ---- -------
------ ------ - ------- - ---- --------
------ - ----------- - ---- ----------------
------ -------- -------------- -------- -- -
----- ----- - ---------- -- --
------ --------
--- ----
------ -
--------------------- --------------
----------
-----------------------
--
-在上面的示例中，我们使用了 useMemo hook 对值进行了优化，避免在每次重渲染时重新计算它。现在，我们可以通过以下方式包装我们应用程序中的任何组件来访问这个上下文。
<RootProvider> <App /> </RootProvider>
步骤 3：使用 use-inside
在我们的组件中，我们可以使用 use-inside hook 获取最接近的父级提供者。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -------------
------ - ----------- - ---- ----------------
-------- ------------- -
----- ------------ - -----------------------
------ -
-----
----------- - ------- ------ - ---- ------ -------
------
--
-在上面的示例中，我们将最近的 RootProvider 存储在一个变量 insideRoot 中，并根据它的存在性渲染不同的内容。
总结
use-inside 是一个非常强大的工具，可以帮助你轻松地在 React 应用程序中获取最接近的作用域。当你创建需要访问上下文的复杂组件时，它非常有用。使用这个库可以使你的代码更简洁，更易于维护和扩展。我们希望这篇文章有助于您更好地了解 use-inside 并开始在您的代码中使用它！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb486b5cbfe1ea06112dd