Блог

Я хотел бы перевести слова, которые находятся внутри объекта. 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})
 }
  

Когда я добавляю const { t } = useTranslation() в MyInformation , это не позволит мне это сделать. Как я могу перевести слова, когда они находятся в map?

 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})
}
  

Вы можете вызвать useTranslation inside OneMenuItem и задать имена в 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>
        )
      })
}