React中Cannot statically analyse 'require(..., ...)'错误求助

嘿，我来帮你搞定这个问题！你遇到的错误是因为Node.js的require()函数只接受单个文件路径参数，你传两个路径进去肯定会触发静态分析报错——毕竟它根本不知道该怎么处理这种用法。

要把语言字符串和对应错误码的JSON文件合并起来，我们可以用对象合并的方式来实现，这里给你几种实用的方案：

方案1：手动合并对象（最直观） #

分别加载两个JSON文件，再用扩展运算符（...）把它们合并成一个对象返回：

module.exports = {
  get en() { 
    const baseStrings = require('./strings/en.json');
    const errorCodes = require('./strings/en_errorCodes.json');
    // 扩展运算符会把两个对象的属性合并，重复的键以后面的为准
    return { ...baseStrings, ...errorCodes };
  },
  get fr() { 
    const baseStrings = require('./strings/fr.json');
    const errorCodes = require('./strings/fr_errorCodes.json');
    return { ...baseStrings, ...errorCodes };
  }
}

方案2：封装工具函数（减少重复代码） #

如果以后要加更多语言，写重复代码会很麻烦，我们可以封装一个通用函数：

// 通用加载合并函数
function loadLocale(lang) {
  const baseStrings = require(`./strings/${lang}.json`);
  const errorCodes = require(`./strings/${lang}_errorCodes.json`);
  return { ...baseStrings, ...errorCodes };
}

module.exports = {
  get en() { return loadLocale('en') },
  get fr() { return loadLocale('fr') }
}

这样新增语言时，只需要在module.exports里加一行get xxx() { return loadLocale('xxx') }就行，非常方便。

方案3：分离属性避免键冲突 #

如果担心语言字符串和错误码有重复的键名，也可以把它们放到不同的属性下，避免覆盖：

module.exports = {
  get en() { 
    return {
      translations: require('./strings/en.json'),
      errors: require('./strings/en_errorCodes.json')
    };
  },
  get fr() { 
    return {
      translations: require('./strings/fr.json'),
      errors: require('./strings/fr_errorCodes.json')
    };
  }
}

使用时就可以通过en.translations.yourKey和en.errors.yourErrorCode分别访问。

小提醒 #

如果你的项目用了Webpack这类构建工具，动态路径的require（比如方案2里的${lang}）可能会触发静态分析警告，这时候可以手动列举每个语言的路径，或者配置构建工具允许动态路径解析。

内容的提问来源于stack exchange，提问作者user1912935