如何使用 react-i18next？

Question

我想翻译对象内部的单词。正在调用 myInformation 并将其与 myCompany 一起放入合并变量中。

import { useTranslation } from 'react-i18next'
const myInformation = {
  title: 'My information',
  icon: InfoOutlinedIcon,
  links: [
    {
      name: 'Personal information',
      slug: `/profile/personal-information`,
      icon: InfoOutlinedIcon,
    },
    {
      name: 'My loyalty programs',
      slug: `/profile/my-loyalty-programs`,
      icon: FavoriteBorderOutlinedIcon,
    },
    {
      name: 'Id documents',
      slug: `/profile/id-documents`,
      icon: ContactMailIcon,
    },
    {
      name: 'My password',
      slug: `/profile/my-password`,
      icon: VpnKeyIcon,
    },
  ],
}

 const ViewInformation = () => {

 const merge = [myInformation, myCompany]
 const renderList = merge.map((item, i) => (
    <OneMenuItem key={i} handleClose={handleClose} item={item} />
  ))

 return({renderList})
 }

当我在 myInformation 下添加 const { t } = useTranslation() 时，它不允许我这样做。地图上的单词怎么翻译？

const oneMenuItem = () => {
    //some other codes here
    const renderNestedLinks = item.links
    item.links.map((link, key) => {
        return (
          <Box key={key} mt={0.5}>
            <ListItem
              onClick={handleClose}
              to={link.slug}
              component={Link}
              className={classes.nested}
            >
              <ListItemIcon style={{ minWidth: '40px' }}>
                {<link.icon color="primary" />}
              </ListItemIcon>
              <ListItemText
                className={classes.listItemText}
                primary={link.name}
              />
            </ListItem>
          </Box>
        )
      })

      return ({renderNestedLinks})
}

Answer 1

可以在OneMenuItem中调用useTranslation，将myInformation中的名字设置为翻译键。假设您的组件名称是 ViewInformation:

const ViewInformation = () => {
  ...component logic

  const myInformation = {
  title: 'my_information',
  icon: InfoOutlinedIcon,
  links: [
    {
      name: 'personal_information',
      slug: `/profile/personal-information`,
      icon: InfoOutlinedIcon,
    },
    ...
  ],
  }
  ...component logic

  const merge = [myInformation, myCompany]
  const renderList = merge.map((item, i) => (
    <OneMenuItem key={i} handleClose={handleClose} item={item} />
  ))
}

然后，在OneMenuItem：

import { useTranslation } from 'react-i18next';

const OneMenuItem = () => {
  const { t } = useTranslation();
 ...component logic

  item.links.map((link, key) => {
        return (
          <Box key={key} mt={0.5}>
            <ListItem
              onClick={handleClose}
              to={link.slug}
              component={Link}
              className={classes.nested}
            >
              <ListItemIcon style={{ minWidth: '40px' }}>
                {<link.icon color="primary" />}
              </ListItemIcon>
              <ListItemText
                className={classes.listItemText}
                primary={t(link.name)} // We use t() here, since item.name is a translation key
              />
            </ListItem>
          </Box>
        )
      })
}

如何使用 react-i18next？

How to use react-i18next?

reactjs

translation

react-i18next