使用 Typescript 的 useContext()

下面的文章将通过一个示例概述如何使用useContext()钩子以及如何更新子组件中全局设置的上下文值。

先决条件：基本熟悉 React 和 Typescript

通常，在 React 应用中，数据是通过 props 自上而下（父级到子级）传递的。像 Redux 这样的第三方状态管理库之所以如此流行，就是因为 React 的 prop 钻取问题。

Prop 钻取包括将 prop 传递给嵌套的子组件，因此，不需要此 prop 的子组件最终仍会得到它，即使他们可能永远不会使用它。

useContext() hook 可以轻松地在整个应用中传递数据，而无需手动沿组件树向下传递 props。它允许创建一个，global state并且所需的子组件可以使用它。

simple alternative如果您的数据不复杂并且应用程序很小，那么useContext() 可以证明是其他状态管理库。

该过程涉及以下内容：

使用 React.createContext() 创建上下文对象

使用 Provider 为你的子组件提供全局创建的上下文

使用 Typescript 的示例：

在下面的示例中，我想根据传递的用户类型全局设置内容的值，以便嵌套的子组件可以使用它。我还将更新其中一个嵌套子组件中内容的值。

让我们开始吧🙌

使用默认值初始化顶层上下文。创建全局上下文钩子 useGlobalContext()

我创建了一个 GlobalContent 类型，它包含 copy 和 setCopy() 方法。使用 setCopy() 方法的原因稍后会解释。

import { createContext, useContext } from "react"
export type GlobalContent = {
  copy: string
  setCopy:(c: string) => void
}
export const MyGlobalContext = createContext<GlobalContent>({
copy: 'Hello World', // set a default value
setCopy: () => {},
})
export const useGlobalContext = () => useContext(MyGlobalContext)

将 context 包装到父级，以便其子组件可以访问 context 的值。我已将其包装到 App.tsx 中的子组件中。

在下面的示例中，getCopy()根据登录的管理员用户获取副本，并使其可用于子组件 Home 和 About

import { MyGlobalContext } from './MyGlobalContext'
import React, { useState } from 'react'
import { getCopy } from './Content'
import { Home } from './Home'
import { About } from './About'
function App() {
const [copy, setCopy] = useState<string>(getCopy('Admin'))
return 
  (
   <MyGlobalContext.Provider value= {{ copy, setCopy }}>
     <Home/> 
    <About/>
  </MyGlobalContext.Provider>
  )
}
export default App

在子组件 Home.tsx 中使用全局设置的 copy 值

import { useGlobalContext } from './MyGlobalContext'
const Home = () => {
const { copy } = useGlobalContext()
return <div>{copy}</div>
}
export default Home

就是这样！您的 useContext() 钩子正在使用中，并且您已成功全局设置 copy 即内容的值😄。

你一定想知道为什么我们仍然有一个未使用的 setCopy() 🤔

正如我在文章开头提到的，如果你想更新子组件中 copy 的值，你需要传递一个函数来更新副本。在我们的例子中，setCopy()它将允许你更新副本。

在下面的示例中，我在单击按钮时为 copy 设置了一个新值，并将其传递给嵌套的子组件 MyProfile.tsx

import { useGlobalContext } from './MyGlobalContext'
import { MyProfile } from './MyProfile'
const About = () => {
const { copy, setCopy } = useGlobalContext()
return(
   <>
    <button onClick={() => setCopy('This is a new copy')}>
      Click me!
    </button>
    <MyProfile newContent={copy} />
  </>
 )
}
export default About

就是这样。信不信由你，通过上面学到的知识（或者部分内容），你可以开始使用 useContext() hook 为你的应用程序创建全局状态了。

鏂囩珷鏉ユ簮锛�https://dev.to/madv/usecontext-with-typescript-23ln