标签: react-i18next

t()我正在使用 React-i18next 库，我需要在函数内部获取翻译函数。

export function translateCell(cell) {
  const { t } = useTranslation();
  return (t(cell));
}

使用时useTranslation()失败并出现错误

钩子只能在函数组件体内调用。

我尝试在初始化中使用I18nextProviderand .use(initReactI18next)，但是两种设置都会产生相同的错误。

我是否以错误的方式使用它，或者我误解了什么？

编辑： 我发现，只有将呈现为组件的函数才能使用 useTranslation。喜欢

function export MyComponent (cell) {
  const { t } = useTranslation();
  return (<div>{t(cell)}</div>);
}
...
render(){
<MyComponent/>

我正在尝试使用 useTranslation() 挂钩在我的 create-react-app 应用程序上实现 react-i18next。

但是，在控制台中，调试模式显示

i18next::backendConnector: 为语言加载命名空间 billingAddress 失败，将 /locales/en/billingAddress.json 解析为 json

和

i18next::translator: missingKey en billingAddress Form.email 客户电子邮件（默认）

i18next.ts

import {initReactI18next} from "react-i18next";
import i18next from "i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-xhr-backend';
import XHR from "i18next-xhr-backend";

i18next
// .use(Backend)
    .use(LanguageDetector)
    .use(XHR)
    .use(initReactI18next) // passes i18n down to react-i18next
    .init({
        lng: "en",
        fallbackLng: {
            'en-US':['en'],
            'zh-CN':['cn'],
            default:['en']
        },
        debug: true,
        ns: ['billingAddress'],
        defaultNS: 'billingAddress',
        // load: "currentOnly",
        interpolation: {
            escapeValue: false // react already safes …

我正在尝试使用react-i18next包含一些 HTML 标签的翻译 json，如下所示：

// en.json
{ "welcome": "Welcome to our site, <strong>{{name}}</strong>" }

在我的 React 组件中，我希望字符串像这样呈现。

欢迎来到我们的网站，约翰

使用该useTranslation函数通常按字面意思打印字符串，而不将其解释为 HTML，例如Welcome to our site, <strong>John</strong>.

import React from 'react'
import { useTranslation } from 'react-i18next'

const App = () => {
  const { t } = useTranslation()

  return(
    <div>{t('welcome', { name: 'John' })}</div>
  )
}

我将其替换为dangerouslySetInnerHTML并且它已正确呈现。

<div dangerouslySetInnerHTML={{ __html: t('welcome', { name: 'John' }) }}></div>

但是，如果可能的话，我想避免使用dangerouslySetInnerHTML。我在文档中读到，您可以使用称为 Trans 组件的东西来进行 HTML 标签的翻译。 …

我正在使用 react-18next 在整个 React 应用程序中加载翻译。我在让我的应用程序等待翻译时遇到问题。这打破了我们在 Jenkins 中的测试，因为他们在许多情况下都在搜索已翻译的密钥。

i18n.tsx：

i18n
.use(initReactI18next)
.init({
  resources, // set ressources to be used
  lng: "en", // set default language
  keySeparator: false, 
  interpolation: {
    escapeValue: false
  },
  react: {
    useSuspense: false,
  }
});

注意：我尝试使用 Suspense 和不使用 Suspense，useSuspense 标志与尝试匹配（真/默认为 Suspense）。

尝试准备：

const SiteLabel: React.FunctionComponent<ISiteLabelProps> = (props) => {
  const { t, ready } = useTranslation(undefined, {
    useSuspense: false
  });

  const getTo = (): string => {
    return "/" + props.module.toLowerCase();
  }

  const getLabel = (): string => …

服务器 Next.js 自动重定向到英语，尽管浏览器有另一种语言 http://localhost:3000/en 而不是 http://localhost:3000。

我的next-i18next.config

module.exports = {
    i18n: {
        locales: ['ua', 'en', 'ru', 'ar'],
        defaultLocale: 'ua',
    }
}

浏览器中安装了乌克兰语和英语。一开始是乌克兰语。

Accept-Language在请求标头中：uk,en;q=0.9

如何让它不重定向到英文？我究竟做错了什么？我的package.json

{
    "name": "connect-prerelease",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next",
        "build": "next build",
        "start": "next start -p $PORT"
    },
    "dependencies": {
        "@parse/react-ssr": "0.0.1-alpha.14",
        "@types/parse": "^2.18.6",
        "bootstrap": "^4.6.0",
        "next": "10.2.3",
        "next-i18next": "^8.5.0",
        "next-images": "^1.8.1",
        "parse": "^3.2.0",
        "react": "17.0.2",
        "react-bootstrap": "^1.6.1",
        "react-dom": "17.0.2"
    },
    "devDependencies": {
        "@types/react": "17.0.11",
        "next-compose": "0.0.2",
        "typescript": "4.3.2"
    }
}

我next-i18next已经在几个项目中使用了 package，而且效果很好。

在我当前的项目中，我需要集成 i18n，但这次只有 cookie 支持，没有国际化路由，我想知道我是否可以用这个包实现这一点，或者我应该返回react-i18next并i18next

样本：

// No cookie or EN cookie
https://app.example.com shows EN version

// Cookie `next-i18n-lang` set to specific language (IT, DE, etc)
https://app.example.com shows translated version

我认为我们不能next/router locale开箱即用，但这作为集成的缺点是可以接受的。

我正在编写故事书，并使用next-i18next. 这就是我的设置方式：

// .storybook/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  fallbackLng: 'de',
  debug: true,
});

export default i18n;

// .storybook/preview.js
import { StoreMall } from '../components/layouts/StoreMall';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import { ThemeProvider } from '@material-ui/core/styles';
import { jamesTheme } from '../components/colors';
import { themes } from '@storybook/theming';
import CssBaseline from '@material-ui/core/CssBaseline';

export const parameters = {
  // ...
};

export const decorators = [
  (Story) => …

我试图为 Redux Action 函数实现 i18n 本地化，但我不断收到不同的钩子错误。当我以这种方式实现 i18n 时，我收到错误。

第 428:17 行：在函数“sendDataRequest”中调用 React Hook“useTranslation”，该函数既不是 React 函数组件，也不是自定义 React Hook 函数。

import { useTranslation } from "react-i18next";

export const sendDataRequest = (requestId) => {
  const { t } = useTranslation();
  return async (dispatch) => {
    try {
      dispatch(sendDataRequest());
      await dataAPI.sendDataRequest({ requestId });
      notification.success({
        message: t('infoPage.requestSentSuccessfully'),      
     });
      dispatch(sendDataSuccess());
    } catch (error) {
      dispatch(sendDataFailure());
      console.error(error);
    }
  }
}

然后我移动了const { t } = useTranslation(); return 语句内部。但后来我收到另一个错误 看来我在这里显然用错了。但我找不到任何有关在 Actions 中使用 i18n 的示例。有谁知道是否可以在 Actions 中使用 i18b？

在我的 React 页面上，更改语言仅在浏览器刷新后才有效。已经尝试了以前帖子中所有可能的建议，但一无所获。它仅对 App.js 组件上的字符串按预期工作。任何帮助表示赞赏。

这是我的 i18n.js 文件

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

const resources = {
    'en': {translation: require('./translations/en.json')},
    'th': {translation: require('./translations/th.json')},
    'pt': {translation: require('./translations/pt.json')},
}

i18n
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    debug: true,
    fallbackLng: 'en',
    // lng: 'th',
    interpolation: {
      escapeValue: false, // not needed for react …

我正在初始化i18next但出现错误：

Uncaught TypeError: Cannot read property 'use' of undefined

以下是我的代码：

import i18n from 'i18next';// Getting eslint error Module imports itself.
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

const fallbackLng = ['en'];
const availableLanguages = ['en', 'ar', 'fr'];

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng,

    detection: {
      checkWhitelist: true,
    },

    debug: false,

    whitelist: availableLanguages,

    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

反应：16.13.1

i18下一个：19.4.5