Reactjs - 如何使用动态值访问 json 中的嵌套键

Question

我已经创建了一个 React 上下文来访问 i18n 翻译，以及一个名为“t”的函数来访问所需的值。它适用于简单键，但不适用于嵌套键。这是我的背景：export function I18nProvider({ children }) {  const [locale, setLocale] = useState<Locales>("en");  const translations = { ch, fr, sw, en };  return (    <I18nContext.Provider value={{ translations, locale, setLocale }}>      {children}    </I18nContext.Provider>  );}export function t(key: string) {  const { translations, locale } = useContext(I18nContext);  return useMemo(() => translations[locale][key], [locale, translations, id]);}这里是 t() 在行动：<div>{t("form.username")}</div>;显然，它不能工作，因为t()返回translations["en"]["form.username"]不正确。我试图在t()参数中允许子字段：t("form", "username")并返回translations[locale][key][sub]. 它有效，但是当我使用单个密钥时失败了。如何使 t() 通用？我考虑过重新格式化我的 t 参数，但如果每次翻译都运行这样的操作，我担心它会影响性能。

Answer 1

尝试使用一个辅助函数，它接受对象和返回深度值的路径作为参数：

并像这样使用它：

export function t(key: string) {

  const { translations, locale } = useContext(I18nContext);

  return useMemo(() => getDeepNestedFieldValue(locale+'.'+key,translations), [locale, translations, id]);

}

纯 JS 中的示例：

const getDeepNestedFieldValue = (path, obj) => {

  return path.split('.').reduce((p, c) => (p && p[c]) || null, obj);

}

let user = {

  name: {

    first: 'John',

    last: 'Doe'

  },

  address: {

    city: {

      name: 'Cairo',

    }

  }

}

console.log(getDeepNestedFieldValue('name.first', user))

console.log(getDeepNestedFieldValue('address.city.name', user))