Reactjs - Как получить доступ к вложенным ключам в json со значениями Dynami c

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 () generi c? Я думал о переформатировании моего параметра 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))