reacti18next：显示翻译键名称但不显示值

Question

这是我第一次为我的项目使用本地化，我对其中的选项数量感到不知所措。当我尝试通过在我的 JSX 中使用 {t("parentBody")} 来使用翻译时，它会按原样在浏览器中呈现为“parentBody”。它没有加载翻译（JSON 文件中的值）。我希望它呈现为值“This is the Parent Body”，但我只看到“parentBody”。

为了本地化，我在我的 React 应用程序中完成了以下操作。谁能帮我解决这个翻译挂钩，它没有加载翻译。

以下是我使用的库的详细信息：

react: ^17.0.2,
react-dom: ^17.0.2,
i18next : ^21.6.10,
i18next-http-backend: ^1.3.2,
react-i18next: ^11.15.3,
typescript: ^4.5.4,

这就是我想要做的：

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './i18n';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

src/react-i18next.d.ts:

import 'react-i18next';
import en from './locales/en/translation.json';
import ta from './locales/ta/translation.json';

declare module 'react-i18next' {
  interface CustomTypeOptions  {
    defaultNS: 'ns1';
    resources: {
          en: typeof en;
          ta: typeof ta;
    };
  };
};

src/i18n.tsx

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationEN from './locales/en/translation.json';
import translationTA from './locales/ta/translation.json';
import Backend from 'i18next-http-backend';
export const defaultNS = 'ns1'


export const resources = {
    en : {translation : translationEN},
    ta : {translation : translationTA},
} as const;

export const availableLanguages = Object.keys(resources);

i18n
    .use(initReactI18next)
    .init({
        resources,
        lng:  "en",
        fallbackLng : "en",
        ns: ['ns1'],
        defaultNS,
        interpolation : {escapeValue : false},
        react: {
          useSuspense: false,
        },
    });

export default i18n;

src/App.tsx

import './App.css';
import React,{ useContext, Suspense} from 'react';
import AllTabs from './components/AllTabs';
import CssBaseline from "@material-ui/core/CssBaseline";
import { ThemeProvider, createTheme  } from "@material-ui/core/styles";
import { createStyles, alpha, Theme, makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import Badge from '@material-ui/core/Badge';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import MenuIcon from '@material-ui/icons/Menu';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import InputLabel from '@material-ui/core/InputLabel';

import { useTranslation } from 'react-i18next';
import {availableLanguages} from "./i18n";

const themeDark = createTheme({
    palette: {
        background: {
            default: "#222222"
        },
        text: {
            primary: "#ffffff"
        }
    }
});

const useStyles = makeStyles((theme: Theme) => ({
  grow: {
    flexGrow: 1,
  },
  logo: {
    maxWidth: 160,
    marginRight: theme.spacing(10),
  },
  
  formControl: {
    margin: theme.spacing(1),
    minWidth: 10,
    width: 150,
    marginLeft: 20,
  },
  select: {
    "& ul": {
        backgroundColor: "#cccccc",
        color: "#333333",
    },
    "& li": {
        fontSize: 12,
    },
  },
}));

export const LanguageContext = React.createContext("en");

function App() {
  const {t, i18n} = useTranslation();
  
  const [language,setLanguage] = React.useState("en");


  const handleLanguageChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    event.preventDefault();
    setLanguage(event.target.value as string);
    i18n.changeLanguage(event.target.value as string);
  };

  return (
   <Suspense fallback="<div>loading...</div>">
   <ThemeProvider theme={themeDark}>
     <CssBaseline/>
        <div className={`App`}>
            <div className={classes.grow}>
              <AppBar position="static">
                <Toolbar>
                  <Typography className={classes.title} variant="h6" noWrap>
                    {t("parentBody")}
                  </Typography>                  
                  <FormControl className={classes.formControl} variant={variantType} size="small">
                    <InputLabel id = "Choose Language">Language</InputLabel>
                    <Select
                      labelId="language-id"
                      id="language"
                      value={language}
                      onChange={e => handleLanguageChange(e)}
                      label="Language"
                      MenuProps={{ classes: { paper: classes.select } }}
                    >
                      <MenuItem value={"en"}>English</MenuItem>
                      <MenuItem value={"ta"}>தமிழ்</MenuItem>
                    </Select>
                  </FormControl>
                </Toolbar>
              </AppBar>
            </div>
          <LanguageContext.Provider value={language}>
            <AllTabs/>
          </LanguageContext.Provider>
        </div>
    </ThemeProvider>
    </Suspense>
  );
}

export default App;

src/locales/en/translation.json:

{
    "parentBody" : "This is the Parent Body"
}

Answer 1

如果你想通过资源选项加载内存中的翻译，你不需要 i18next-http-backend 依赖。如果你想通过 http 加载翻译，你不需要设置 resources 选项。 https://www.i18next.com/how-to/add-or-load-translations

-> 尝试将 i18next 调试标志设置为 true 并检查开发人员控制台。

i18n
    .use(initReactI18next)
    .init({
        debug: true,
        // ... other options
    });

您也可以对照本指南：https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb

reacti18next：显示翻译键名称但不显示值

reacti18next: Translation key names are shown but not values

internationalization

i18next

react-i18next