映射不是来自translation.json的数据时如何使用react-i18next

Question

这是我要映射的对象数组。如您所见，它还包含material-ui 图标组件。这就是为什么我无法通过 locales 中的 translation.json 进行映射

  const sidebarData = [

 {
      text: "Picken",
      icon: <GetAppIcon style={{ fontSize: 35 }} />,
      path: "/picken",
      title: "Artikel picken",
 },
 {
      text: "Hole Artikel",
      icon: <AddShoppingCartIcon style={{ fontSize: 35 }} />,
      path: "/holeartikel",
      title: "Hole Artikel zu dieser Workstation",
 },
 {
      text: "Hole Regal",
      icon: <ImportExportIcon style={{ fontSize: 35 }} />,
      path: "/holeregal",
      title: "Hole Regal zu dieser Workstation",
 }];

英文翻译的语言环境 (locales/en/translation.json) 如下所示：

{
 "sidebarmenu": {
      "jobliste": "Joblist",
      "picken": "Picken",
      "artikel": "Get Item",
      "regal": "Get Pod",
      "leer": "Get Storage",
      "karte": "Show Map"
 },
 "header": {
      "jobliste": "Joblist",
      "picken": "Pick Item",
      "artikel": "Get Item to this workstation",
      "regal": "Get Pod to this workstation",
      "leer": "Get empty storage to this workstation",
      "karte": "Show Warehouse Map"
 }

组件看起来像这样：

 import React, { useState, useEffect} from "react";
 import { useHistory } from "react-router-dom";
 import layouttheme from "./layouttheme";
 import ListAltIcon from "@material-ui/icons/ListAlt";
 import {Drawer,Typography,Divider,ListItemText,ListItem,List,Box,} from "@material-ui/core";
 import useStyles from "./LayoutStyles";
 import {useTranslation } from "react-i18next";


 function DrawerComp({ open, setOpen, sidebarData }) {

 const classes = useStyles();
 const history = useHistory();
 const [getPath, setGetPath] = useState("Jobliste");
 const { t } = useTranslation();

 function handleClick(item) {
      history.push(item.path);
      setGetPath(item.title);
 }

 
 return (
      <Drawer variant="persistent" anchor="left" open={open}>
           <List className={classes.sbList} sidebarData={sidebarData}>
                {sidebarData.map(item => (
                     <ListItem
                          key={item.text}
                          onClick={() => handleClick(item)}
                     >
                          <ListItemIcon>{item.icon}</ListItemIcon>
                          <ListItemText>{item.text}</ListItemText>
                     </ListItem>
                ))}
           </List>
      </Drawer>
 );
 }

 export default DrawerComp;

所以我的问题是如何将 sidebarData 与 translation.json 连接以获得翻译？

Answer 1

如果此对象由父组件组成，您可以翻译 sidebarData：

  const sidebarData = [{
      text: t("picken"),
      icon: <GetAppIcon style={{ fontSize: 35 }} />,
      path: "/picken",
      title: "Artikel picken",
 }, {
      text: t("hole_artikel"),
      icon: <AddShoppingCartIcon style={{ fontSize: 35 }} />,
      path: "/holeartikel",
      title: "Hole Artikel zu dieser Workstation",
 }, {
      text: t("hole_regal"),
      icon: <ImportExportIcon style={{ fontSize: 35 }} />,
      path: "/holeregal",
      title: "Hole Regal zu dieser Workstation",
 }];

您还可以使用对象中的翻译键而不是全文。然后在您的渲染函数中，使用t() 包装属性。

我个人不喜欢这样做，因为您无法使用 i18next-scanner 之类的工具提取翻译。

  const sidebarData = [{
      text: "picken",
      icon: <GetAppIcon style={{ fontSize: 35 }} />,
      path: "/picken",
      title: "Artikel picken",
 }, {
      text: "hole_artikel",
      icon: <AddShoppingCartIcon style={{ fontSize: 35 }} />,
      path: "/holeartikel",
      title: "Hole Artikel zu dieser Workstation",
 }, {
      text: "hole_regal",
      icon: <ImportExportIcon style={{ fontSize: 35 }} />,
      path: "/holeregal",
      title: "Hole Regal zu dieser Workstation",
 }];

 return (
      <Drawer variant="persistent" anchor="left" open={open}>
           <List className={classes.sbList} sidebarData={sidebarData}>
                {sidebarData.map(item => (
                     <ListItem
                          key={item.text}
                          onClick={() => handleClick(item)}
                     >
                          <ListItemIcon>{item.icon}</ListItemIcon>
                          <ListItemText>{t(item.text)}</ListItemText>
                     </ListItem>
                ))}
           </List>
      </Drawer>
 );