reactjs - 如何翻译长文本长文本，使用react-i18next？

Question

伙计们。我正在尝试使用 i18n 实现本地化来翻译我的网站。我已经阅读了文档并观看了一些教程，但他们只关注一个只有一点字符串的文件，我想知道如何翻译整个段落？

这里是一个代码框的链接，与我的项目的路径类似： https ://codesandbox.io/s/try-translating-long-texts-v0jdu?file=/src/App.jsx

谢谢你的时间，你的帮助。=D

Answer 1

您必须使用带有翻译的 JSON/JS 文件。

例子 ：

数据.js

const data = {
  /************ ENGLISH **************/
  en: {
    paragraph: `Bernard, as "custodian" of the "savage" John who is now treated as a celebrity, is fawned on by the highest members of society and revels in attention he once scorned. Bernard's popularity is fleeting, though, and he becomes envious that John only really bonds with the literary-minded Helmholtz. Considered hideous and friendless, Linda spends all her time using soma, while John refuses to attend social events organised by Bernard, appalled by what he perceives to be an empty society. Lenina and John are physically attracted to each other, but John's view of courtship and romance, based on Shakespeare's writings, is utterly incompatible with Lenina's freewheeling attitude to sex. She tries to seduce him, but he attacks her, before suddenly being informed that his mother is on her deathbed. He rushes to Linda's bedside, causing a scandal, as this is not the "correct" attitude to death. Some children who enter the ward for "death-conditioning" come across as disrespectful to John until he attacks one physically. He then tries to break up a distribution of soma to a lower-caste group, telling them that he is freeing them. Helmholtz and Bernard rush in to stop the ensuing riot, which the police quell by spraying soma vapor into the crowd.`,
  },
  /************ FRENCH **************/
  fr: {
    paragraph: `Bernard, en tant que "gardien" du "sauvage" John qui est maintenant traité comme une célébrité, est admiré par les plus hauts membres de la société et se délecte de l'attention qu'il a autrefois méprisée. La popularité de Bernard est éphémère, cependant, et il devient envieux que John ne se lie vraiment qu'avec le Helmholtz à l'esprit littéraire. Considérée comme hideuse et sans amis, Linda passe tout son temps à utiliser le soma, tandis que John refuse d'assister aux événements sociaux organisés par Bernard, consterné par ce qu'il perçoit comme une société vide. Lenina et John sont physiquement attirés l'un par l'autre, mais la vision de la cour et de la romance de John, basée sur les écrits de Shakespeare, est totalement incompatible avec l'attitude de Lenina à l'égard du sexe. Elle essaie de le séduire, mais il l'attaque, avant d'être soudainement informé que sa mère est sur son lit de mort. Il se précipite au chevet de Linda, provoquant un scandale, car ce n'est pas l'attitude "correcte" face à la mort. Certains enfants qui entrent dans la salle pour « conditionnement à mort » semblent irrespectueux envers John jusqu'à ce qu'il en attaque un physiquement. Il essaie ensuite de briser une distribution de soma à un groupe de caste inférieure, leur disant qu'il les libère. Helmholtz et Bernard se précipitent pour arrêter l'émeute qui s'ensuit, que la police réprime en pulvérisant de la vapeur de soma dans la foule.`,
  },
};

export default data;

然后，将其导入您的 i18n 文件

i18n.js

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

// Data
import data from './data';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    // init data
    resources: {
      fr: {
        translation: data.fr,
      },
      en: {
        translation: data.en,
      },
    },
    fallbackLng: 'en',
    debug: false,
    ns: ['translations'],
    defaultNS: 'translations',
    keySeparator: false,
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

完整演示： Stackblitz