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> ）