How can I use a React context variable when initiating i18next interpolation?

在使用 i18next 进行国际化时，我们经常需要在文本中插入一些动态内容，比如用户的名字或者其他从 React 的上下文中获取的数据。要做到这一点，我们可以利用 i18next 提供的插值功能，结合 React 的 Context API 来实现。

首先，我们需要设置 React 的 Context。这里举一个简单的例子，假设我们有一个 UserContext，用来存储用户的信息：

jsx
import React, { createContext, useContext } from 'react';

const UserContext = createContext(null);

const UserProvider = ({ children }) => {
  const user = { name: '张三' }; // 假设这是从API获取的用户信息
  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
};

const useUser = () => useContext(UserContext);

然后，在我们的组件中，我们可以使用 useUser Hook 来获取当前的用户信息，并通过 i18next 的插值功能，在翻译字符串中插入用户名：

jsx
import React from 'react';
import { useTranslation } from 'react-i18next';
import { useUser } from './UserContext'; // 引入上面定义的 useUser

const Greeting = () => {
  const { t } = useTranslation();
  const { name } = useUser();

  return <h1>{t('helloUser', { name })}</h1>;
};

在 i18next 的资源文件中，我们需要定义一个带有插值的字符串：

json
{
  "en": {
    "translation": {
      "helloUser": "Hello, {{name}}"
    }
  },
  "zh": {
    "translation": {
      "helloUser": "你好，{{name}}"
    }
  }
}

这样，当 Greeting 组件渲染时，它会从 UserContext 中获取当前用户的名字，并通过 i18next 的 t 函数，将用户名插入到翻译文本中。这样就实现了使用 React 上下文变量在 i18next 中进行动态插值。

这种方法的优点是可以很灵活地将任意的上下文数据集成到你的翻译文本中，非常适合需要显示用户个性化信息或者其他动态上下文数据的场景。