如何将变量用作i18next的键？

在使用i18n进行国际化时，通常我们会将翻译的文本存储在一个或多个JSON文件中，并通过特定的键来访问这些文本。如果想要使用变量作为键来动态获取文本，可以按照以下步骤操作：

1. 定义翻译文件

首先，确保你有一个翻译文件，例如translation.json，里面包含了各种语言的翻译键和值。例如：

json
{
  "welcome_message": "Welcome",
  "farewell_message": "Goodbye"
}

2. 使用i18next初始化

在你的应用程序中，初始化i18next并加载翻译文件：

javascript
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: require('./locales/en/translation.json')
      }
    },
    lng: "en",
    fallbackLng: "en",
    interpolation: {
      escapeValue: false
    }
  });

3. 使用变量作为键

当你需要根据某些条件动态选择显示哪个翻译文本时，可以将变量作为键来获取相应的文本。这里以一个简单的示例展示如何实现：

javascript
const getMessage = (key) => {
  return i18n.t(key);
};

const key = 'welcome_message';
console.log(getMessage(key));  // 输出: Welcome

在这个示例中，函数getMessage接收一个参数key，这个参数是我们想要从翻译文件中获取的文本的键。然后使用i18n.t()方法来获取与键对应的文本。

实际应用示例

假设你正在开发一个多语言的网站，用户在登陆后需要显示欢迎语或者告别语，这取决于用户的行为，你可以这样做：

javascript
const userAction = 'login'; // 或者 'logout'

const key = userAction === 'login' ? 'welcome_message' : 'farewell_message';
const message = i18n.t(key);

console.log(message); // 如果userAction是'login'，输出: Welcome

这种方式的灵活性在于你可以根据不同的场景和条件选择不同的翻译键，从而使得应用程序更加动态和多样化。