i18n Локализация в взаимодействии с материалом UI путем расширения типографии?

Question

Я начинал мучительную работу по добавлению useTranslation хука react-i18next ко всем моим компонентам, когда думал, что могу использовать компонент Typography MaterialUI (уже в моем приложении), чтобы скрыть логи * 1012. *.

➡️ Есть ли какие-либо рекомендации / советы делать или не делать?

➡️ Это хорошая идея?

Пример

import React from 'react'
import {useTranslation} from 'react-i18next'
import { Typography } from '@material-ui/core'

const TranslatedTypography = ({children}) => {
    const {t} = useTranslation()

    return <Typography>{t(children)}</Typography>
}

Answer 1

Это не подходит для каждого варианта использования (например, для текста кнопки, где используется хук), но вот что я использовал:

import { Trans } from 'react-i18next'
import { Typography } from '@material-ui/core'
import React from 'react'

const TranslatedTypography = ({
    children,
    i18nKey,
    count = 1,
    ...otherProps
}) => {
    return (
        <Typography {...otherProps}>
            <Trans i18nKey={i18nKey} count={count}>
                {children}
            </Trans>
        </Typography>
    )
}

export default TranslatedTypography

И вы можете использовать его следующим образом:

<TranslatedTypography
    i18nKey="yourKey"
    variant="h6">
  title
</TranslatedTypography>

Примечание: кажется, вы также можете опустить опору i18nKey и поставить ключ непосредственно как дочерний элемент.