Gatsby 和 React Context API：使用 Context 设置国际化语言

Question

目前致力于 Gatsby 项目并尝试实施 i18n/国际化。 我想为我的网站提供英语和法语版本。

我正在按照本教程来实现这一点。 在使用 Context API 创建上下文并将其传递给我的组件时，我遇到了一个问题。 在我遵循的教程中，有一个我不确定的奇怪语法：

const PageContext = React.createContext<PageContextValue>({})

这是使用createContext创建上下文的完整组件：

import React from 'react'
import { useTranslation } from 'react-i18next'

const PageContext = React.createContext<PageContextValue>({})

export const PageContextProvider = ({ pageContext, children }) => {
    const { i18n } = useTranslation()
    i18n.changeLanguage(pageContext.lang)

    return <PageContext.Provider pageContext={pageContext}>{children}</PageContext.Provider>;
}

export const usePageContext = () => React.useContext(PageContext)

它产生以下错误：

是什么导致了这个错误？ 我对 Context API 了解不多，但React.createContext<PageContextValue>({})语法看起来很奇怪并引发错误。

Answer 1

createContext是一个通用方法，因此PageContextValue是您的上下文值的类型。 本教程似乎没有定义这个值（在我看来这是一个问题），但你可以这样做：

type PageContextValue = {
  // Your type definition here
}

但是，打字稿足够智能，可以推断类型本身，因此您只需创建上下文即可：

const PageContext = React.createContext({})

请注意，类型一旦定义就是静态的，因此如果您实际传递了一个{} ，它将成为设置类型，并且您将无法实际向上下文添加值，否则您将收到打字稿错误。 所以请确保：

• 任一定义如上所示类型
• 或者在创建上下文时添加默认值以确保const PageContext = React.createContext({counter: 0})正确推断它，例如： const PageContext = React.createContext({counter: 0})将允许您稍后在上下文中访问counter而不会出错。

编辑：刚刚发现您没有使用打字稿。 您发布的教程是用打字稿编写的！ 如果继续使用它的语法，你会偶然发现更多错误，所以我建议你只为你的项目使用 typescript。 但是对于这个错误，可以修复删除泛型类型（ <PageContextValue> ）