Next.js 使用 React Context 的方法

React Context 是 React 提供的一种数据共享方案，它可以让我们在组件树中传递数据而不必一级一级地手动传递 props。在 Next.js 中，我们可以很方便地使用 React Context 来实现全局状态管理。

创建 Context

首先，我们需要创建一个 Context。在 React 中，创建 Context 有两种方式：使用 React.createContext 函数或使用 useContext 钩子函数。在 Next.js 中，我们通常使用 React.createContext 函数来创建 Context，因为它可以更方便地在多个文件中共享。

// ./contexts/MyContext.js

import React from 'react'

const MyContext = React.createContext()

export default MyContext

在上面的代码中，我们创建了一个名为 MyContext 的 Context。接下来，我们可以在任何需要使用这个 Context 的组件中引入它。

提供 Context

创建好 Context 后，我们需要在某个组件上提供这个 Context。在 Next.js 中，我们通常在 _app.js 文件中提供 Context，因为它是所有页面的共同父组件。

// www.javascriptcn.com code example
// ./pages/_app.js

import MyContext from '../contexts/MyContext'

function MyApp({ Component, pageProps }) {
  return (
    <MyContext.Provider value={{}}>
      <Component {...pageProps} />
    </MyContext.Provider>
  )
}

export default MyApp

在上面的代码中，我们在 MyApp 组件中提供了 MyContext。我们把一个空对象作为 Context 的值传递给了 MyContext.Provider 组件。

使用 Context

提供了 Context 后，我们就可以在任何需要使用这个 Context 的组件中获取它了。在 Next.js 中，我们通常使用 useContext 钩子函数来获取 Context。

// www.javascriptcn.com code example
// ./components/MyComponent.js

import { useContext } from 'react'
import MyContext from '../contexts/MyContext'

function MyComponent() {
  const { /* 在这里获取 Context 的值 */ } = useContext(MyContext)

  return (
    // 在这里使用 Context
  )
}

export default MyComponent

在上面的代码中，我们使用 useContext 钩子函数来获取 MyContext 的值。我们可以从返回值中解构出我们需要的值，然后在组件中使用它们。

示例代码

下面是一个完整的示例代码，它演示了如何在 Next.js 中使用 React Context。

// ./contexts/ThemeContext.js

import React from 'react'

const ThemeContext = React.createContext()

export default ThemeContext

// www.javascriptcn.com code example
// ./pages/_app.js

import ThemeContext from '../contexts/ThemeContext'

function MyApp({ Component, pageProps }) {
  const [theme, setTheme] = React.useState('light')

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Component {...pageProps} />
    </ThemeContext.Provider>
  )
}

export default MyApp

// www.javascriptcn.com code example
// ./components/MyComponent.js

import { useContext } from 'react'
import ThemeContext from '../contexts/ThemeContext'

function MyComponent() {
  const { theme, setTheme } = useContext(ThemeContext)

  return (
    <div>
      <p>当前主题：{theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        切换主题
      </button>
    </div>
  )
}

export default MyComponent

在上面的代码中，我们创建了一个名为 ThemeContext 的 Context，并在 _app.js 文件中提供了它。我们在 MyComponent 组件中使用了 useContext 钩子函数来获取 theme 和 setTheme，并在组件中使用它们来实现主题切换。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0eeada941bf71341fd97f