标签: i18next

我正在尝试使用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+i18next 并且我的网站上有两种语言。

如何更改我的页面上的 HTML 'lang' 属性？

我使用 i18next-browser-languageDetector 但 lang attr 没有改变

服务器 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"
    }
}

我的应用程序相当大，因此为了拥有更有条理的翻译文件，我想使用嵌套命名空间。例子：

{
    "contract": {
        "index": {
            "pageTitle": "Contract"
    }
}

问题是当我访问它时。在这个问题的帮助下，我发现我可以通过使用它来访问索引内的键，如下所示：

const { t, i18n } = useTranslation('contract', { useSuspense: false });
...
t('index.pageTitle')

问题是似乎没有必要index.为我想要访问的每个键添加前缀。我想做的是导入命名空间索引而不是合约，并按如下方式使用它：

const { t, i18n } = useTranslation('contract:index', { useSuspense: false });
...
t('pageTitle')

这是行不通的。我contract.index也尝试过。在官方文档中我没有找到任何关于嵌套的内容。是否有可能完成我想要做的事情，或者我必须坚持为每个键添加前缀？

我正在编写故事书，并使用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 应用程序中使用i18n包来翻译一些文本。但我无法迭代作为我的翻译数据的对象数组。

我想迭代数组socials并将其显示在我的模板中。但当我这样做时，它说：socials.map is not a function

这是我的翻译 json 文件：

{
  "socials": [
  {
    "name": "Github",
    "url": "#"
  },
  {
    "name": "Twitter",
    "url": "#"
  },
  {
    "name": "Linkedin",
    "url": "#"
  },
  {
    "name": "Instagram",
    "url": "#"
  }
 ]
}

这是我的 jsx 代码：

import { useTranslation } from 'react-i18next';

const Content = () => {
  const { t, i18n } = useTranslation();

  const socials = t('socials', { returnObjects: true });

  rerurn (
    <div className="flex">
      {socials.map((social) …

我使用 i18next，我想将 t 函数 prop 传递到我的界面。

经验：

const { t } = useTranslation();

export interface ITranslate {
   translate: ... type?
}

“t”变量的类型是什么？

我正在使用nextjs v12.2、@mui/material v5.9、next-i18next v11.3

我正在尝试根据不断变化的语言实现动态 Rtl/Ltr 支持

我使用此示例将 Next.JS 与 Material UI v5 集成，并使用此文档来更改 MUI 组件的方向

问题是“每次当我在 mui 组件的语言生成类之间切换时，如下图（屏幕截图）所示，对于所有 mui 组件，在此示例中为 mui 输入组件创建了一个重复的类”

我目前的实现如下：

_文档

import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
import theme from "theme";
import createEmotionCache from "theme/createEmotionCache";
import i18nextConfig from "next-i18next.config";

export default class MyDocument extends Document {
  render() {
    const { locale } = this.props.__NEXT_DATA__;

    return (
      <Html …

昨天，i18next引入了一种新的返回类型DefaultTFuncReturn，我正在尝试升级此依赖项，但出现了一大堆错误。这是因为它过去返回一个字符串，现在DefaultTFuncReturn每次我使用useTranslation钩子时它都会返回。例如：

const { t } = useTranslation();
...
t('Test')

现在的返回类型t('Test')是DefaultTFuncReturn，但是如果我在函数内部使用变量，就像t('{{var}} something', { var })它返回一个字符串一样，那么它在这种情况下可以工作。我在文档中找不到任何解释这一新更改的内容，所以我想知道您是如何处理这个问题的，因为我知道这个包被很多人使用。