どのようにあなたの反応プロジェクトとi 18 next国際化を統合するには?

ときにいくつかのプロジェクトや国に取り組んでいる言語は、私たちが心に留めておく必要がある最も重要な事実の一つは、特に我々のアプリケーションは、国際市場を持つことを目的と開発された場合.
いくつかのケースでは、プロジェクトの国際化を処理するのは困難で複雑ですが、異なるアプローチで使用できるさまざまなツールがあります.その理由については、ポストについては、私はあなたについて説明します.次のフレームワークは、迅速かつ素晴らしい方法で我々の反応プロジェクトに国際化を統合するのに役立つことができる便利なツールです.

I 18 next

I18next is an internationalization framework written in and for JavaScript. But it's much more than that. I18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.

ご覧のように、私はJavaScriptプロジェクトに国際化機能を適用するのに役立つフレームワークです.

REACH - 18 NEXT

react-i18next is a powerful internationalization framework for React / React Native which is based on i18next. The module provides multiple components eg. to assert that needed translations get loaded or that your content gets rendered when the language changes.

Reactive - I 18 NEXTは、あなたの反応プロジェクトに国際化を加えたいときの最良のオプションです.

しましょう

プロジェクトを作成

まず、次のコマンドで反応プロジェクトを作成する必要があります

npx create-react-app react-i18next-example

依存関係のインストール

その後、プロジェクト依存関係をインストールする必要があります

npm install react-i18next i18next --save

あなたが見ることができるように、私たちはまた、私たちがI - 18を使用するときにI 18 Nextをインストールしました

構成

I 18 Njs

新しいファイルI 18 nを作成する必要があります.我々のインデックスのそばのJS.以下の内容を含んでいるJS

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  },
  fr: {
    translation: {
      "Welcome to React": "Bienvenue à React et react-i18next"
    }
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: "en", 
    interpolation: {
      escapeValue: false
    }
  });

  export default i18n;

ここで面白い部分はi18n.use(initReactI18next) 私たちはI 18 NのインスタンスをReact - I 18 nextに渡します.これはコンテキストAPIを通してすべてのコンポーネントで利用可能になります.
その後、I 18 Nをインポートする必要があります.私たちのインデックスにJSファイル.jsファイル

import React, { Component } from "react";
import ReactDOM from "react-dom";
import './i18n';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

前の手順を実行したときに、Reactt - I 18を使用して起動することができます.

アプリ。js

import "./styles.css";
import { useTranslation } from "react-i18next";

export default function App() {
  const { t } = useTranslation();
  return (
    <div className="App">
      <h1>{t("Welcome to React")}</h1>
    </div>
  );
}

その後、次のページの場所の言語英語またはフランス語に基づいて

さまざまなオプションを使用してコンテンツを翻訳

reit - i 18 nextは、我々のプロジェクトで国際化を使用する必要がある場合、いくつかの異なるオプションを提供します

USE翻訳フックの使用

機能コンポーネントのフックを使用するオプションの一つです.T関数は、コンテンツを翻訳するI 18 Nextの主な機能です.

import React from 'react';

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();
  return <h1>{t('Welcome to React')}</h1>
}

フックについて詳しく知るuseTranslation

WithReal Hostの使用

高次のコンポーネントを使用することは、それらに追加小道具を渡すことによって既存のコンポーネントを拡張する最も使用されるメソッドの1つです.

import React from 'react';

import { withTranslation } from 'react-i18next';

const MyComponent = ({ t }) => {
  return <h1>{t('Welcome to React')}</h1>
}

export default withTranslation()(MyComponent);

高次コンポーネントについて詳しく知るwithTranslation .

レンダリングプロップの使用

レンダリングプロップでは、コンポーネント内のT関数を使用できます.

import React from 'react';
import { Translation } from 'react-i18next';
const MyComponent = () => {
  return (
    <Translation>
      {
        t => <h1>{t('Welcome to React')}</h1>
      }
    </Translation>
  )
}
export default MyComponent;

レンダリングプロップについて詳しく知るTranslation .

トランスコンポーネントの使用

トランスコンポーネントはJSXツリーを1つの翻訳に翻訳する最良の方法です.これは、簡単にできます.リンクコンポーネントを含むテキストを簡単に翻訳または書式設定<strong> .

import React from 'react';
import { Trans } from 'react-i18next';

const MyComponent = () => {
  return <Trans><H1>Welcome to React</H1></Trans>
}

export default MyComponent;

ノート

この場合、翻訳キーと内容は、次の例としてタグで宣言する必要があります.

"<0>Welcome to React</0>": "<0>Welcome to React and react-i18next</0>"

補間

補間はi 18 nで最も使用される機能の一つです.それはあなたの翻訳に動的な値の統合を許可します.デフォルトでは、補間値はXSS攻撃を緩和するためにエスケープされます.

例

I 18 NEXTを使用すると、最終的な翻訳レンダリングと統合されます.

{
    "key": "{{what}} is {{how}}"
}

それで、私たちがその翻訳を呼ぶとき、我々はT関数にParamsを渡すことができます

import "./styles.css";
import { useTranslation } from "react-i18next";

export default function App() {
  const { t } = useTranslation();
  return (
    <div className="App">
      <h1>{t("key", { what: "interpolation", how: "great" })}</h1>
    </div>
  );
}

この例をもっと詳しく見ることができます

データモデルの操作

補間で使用できるもう一つの素晴らしいものは、データモデルを渡すことです

{
    "key": "I am {{author.name}}"
}

反応コンポーネントの場合、あなたはauthor 補間へのデータ.

import "./styles.css";
import { useTranslation } from "react-i18next";

export default function App() {
  const { t } = useTranslation();
  const author = { 
    name: 'Brayan',
    github: 'Arrieta'
};
  return (
    <div className="App">
      <h1>{t("key", { author })}</h1>
    </div>
  );
}

結論

このようにReart - I 18 NEXTとI 18 NEXTは、我々のアプリケーションは、国際市場を持っている場合に我々のプロジェクトで使用できるいくつかの素晴らしい機能を提供しています.
この記事があなたの反応プロジェクトで国際化を使用するのに本当に役立つと思います.私はこのポストをあなたのコメントと推薦に基づいて更新します.ありがとう👍

参考文献

react-i18next

i18next