0

我们正在制作一个 npm react 包（通过 tsdx 库），这是一个用于多语言反应项目的自定义钩子。安装此包的开发人员需要在根目录下创建一个config.json文件，并在其 Next.js 项目的公共文件夹中创建一个Languages.json文件。我们需要的是我们可以在应用程序的客户端读取Languages.json 。

包文件： LanguageProvider.tsx：存储当前语言环境状态的反应上下文。

UseTranslation.tsx：一个自定义钩子，它从上下文中获取语言环境并从 Languages.json 中的同一语言环境中找到键。

export function useTranslation() {
  const { locale } = useContext(LanguageContext);
  let LanguagesFile;
  if (typeof window === 'undefined') {
    const fs = require('fs');
    LanguagesFile = fs.readFileSync("./public/Languages.json", 'utf8');
  }
  
  function t(key: string) {
    if (typeof LanguagesFile !== 'undefined') {
      const Languages = JSON.parse(LanguagesFile);
      if (!Languages && !Languages[locale] && !Languages[locale][key]) {
        console.warn(`No string '${key}' for locale '${locale}'`);
        return false;
      } else {
        return Languages[locale][key].toString() || '';
      }
    }
  }
  return t;
}

当我从UseTranslation.tsx记录Languages.json文件时，它会显示服务器上的数据，但它在应用程序的客户端未定义。

4

0 回答 0