Javascript 盖茨比公司；React-Context API：使用上下文设置国际化语言

目前正在从事盖茨比项目，并试图实施i18n/国际化。我想为我的网站提供英文和法文版本

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

const PageContext=React.createContext（{}）

下面是使用

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)

从“React”导入React
从“react-i18next”导入{UseTransation}
const PageContext=React.createContext（{}）
export const PageContextProvider=（{pageContext，children}）=>{
const{i18n}=usetransation（）
i18n.changeLanguage（pageContext.lang）
返回{children}；
}
export const usePageContext=（）=>React.useContext（PageContext）

它会产生以下错误：

---

是什么导致了这个错误？我对Context API了解不多，但是

React.createContext（{}）

语法看起来很奇怪，并抛出了一个错误。

createContext是一个，因此

PageContextValue

是上下文值的类型。 本教程似乎没有定义此值（我认为这是一个问题），但您可以通过以下方式来定义此值：

type PageContextValue = {
  // Your type definition here
}

但是，typescript足够聪明，可以推断类型本身，因此您只需创建上下文：

const PageContext = React.createContext({})

请注意，类型定义后是静态的，因此如果您实际传递了一个

{}

，则该类型将是设置的类型，并且您将无法实际向上下文添加值，否则您将收到typescript错误因此请确保：

• 如上图所示定义类型
• 或在创建上下文时添加默认值以确保typescript正确推断，例如：

  const PageContext=React.createContext（{counter:0}）

  将允许您稍后访问上下文中的

  计数器

---

编辑：刚刚发现您没有使用typescript。您发布的教程是用typescript编写的！如果你继续使用它的语法，你会遇到更多的错误，所以我建议你在项目中使用typescript。但是对于这个错误，可以修复删除泛型类型（

）

它的typescript/flow语法，猜测您没有使用它，所以您应该删除它。我没有使用typescript。我怎样才能在不使用打字脚本的情况下重写那一行使它工作呢？谢谢你的提醒。通过查看教程代码，我在其他文件中没有看到太多的TS。修改教程代码是否可行？快速浏览教程，我只找到了一个typescript类型注释：

SEO:React.FC

。如果您删除了

：React.FC

，您应该可以继续，但我可能错过了一些东西。我不想批评一些我没有完全阅读过的东西，但乍一看，这似乎不是一个非常奇怪和不完整的混合JS和TS的教程，甚至没有提到它。我对它进行了修补，并使它工作起来。谢谢你的帮助，我很感激。