reactjs - 通过扩展排版在 React 中使用 Material UI 进行 i18n 本地化？

Question

当我认为我可以使用 Typography 组件(已经在我的应用程序中)来隐藏逻辑。

➡️ 有什么推荐/建议做或不做吗？

➡️ 这是个好主意吗？

例子

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

它并不适合所有用例(例如使用钩子(Hook)的按钮文本)但这是我使用的:

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 属性，直接将 key 作为 child 。