Как да използвате React Intl, за да интернационализирате вашите React приложения

React Intl е популярна библиотека, която предоставя набор от компоненти и помощни програми за интернационализиране на React приложения. Интернационализацията, известна още като i18n, е процес на адаптиране на приложение към различни езици и култури.

Можете лесно да поддържате множество езици и локали във вашето React приложение с ReactIntl.

Инсталиране на React Intl

За да използвате библиотеката React Intl, първо трябва да я инсталирате. Можете да направите това с повече от един мениджър на пакети: npm, прежда или pnpm.

За да го инсталирате с npm, изпълнете тази команда във вашия терминал:

npm инсталирайте реакция-intl

За да го инсталирате с помощта на прежда, изпълнете тази команда:

прежда добавяне на реакция-вм

Как да използвате React Intl Library

След като инсталирате библиотеката React Intl, можете да използвате нейните компоненти и функции във вашето приложение. React Intl има подобни функции на API на JavaScript Intl.

Някои ценни компоненти, предлагани от библиотеката React Intl, включват Форматирано съобщение и IntlProvider компоненти.

Компонентът FormattedMessage показва преведените низове във вашето приложение, докато компонентът IntlProvider предоставя преводите и информацията за форматиране на вашето приложение.

Трябва да създадете файл за превод, преди да можете да започнете да използвате компонентите FormattedMessage и IntlProvider за превод на вашето приложение. Файлът за превод съдържа всички преводи за вашето приложение. Можете да създадете отделни файлове за всеки език и локал или да използвате един файл, който да съдържа всички преводи.

Например:

износконст messagesInFrench = {
 поздрав: „Bonjour {name}“
}

износконст messagesInItalian = {
 поздрав: „Buongiorno {name}“
}

Този примерен файл за превод съдържа два обекта за превод: съобщения на френски и съобщения на италиански. Можете да замените контейнера {име} в поздрав низ по време на изпълнение с динамична стойност.

За да използвате преводите във вашето приложение, трябва да обвиете основния компонент на приложението си с IntlProvider компонент. Компонентът IntlProvider отнема три React подпори: локал, defaultLocale, и съобщения.

Пропът на локала приема низ, който указва локала на потребителя, докато defaultLocale указва резервен вариант, ако предпочитаният от потребителя локал не е наличен. И накрая, съобщението проп приема обект за превод.

Ето пример, показващ как можете да използвате IntlProvider:

импортиране Реагирайте от"реагира";
импортиране ReactDOM от"react-dom/клиент";
импортиране Приложение от"./Приложение";
импортиране {IntlProvider} от"react-intl";
импортиране { messagesInFrench } от"./превод";
ReactDOM.createRoot(документ.getElementById("корен")).render(

"fr" messages={messagesInFrench} defaultLocale="bg">

 </IntlProvider>
 </React.StrictMode>
);

Този пример преминава фр локал, на съобщения на френски превод и по подразбиране en локал на IntlProvider компонент.

Можете да подадете повече от един локал или обект за превод и IntlProvider автоматично ще открие езика на браузъра на потребителя и ще използва подходящите преводи.

За да покажете преведени низове във вашето приложение, използвайте Форматирано съобщение компонент. The Форматирано съобщение компонент отнема документ за самоличност prop, съответстващ на идентификатор на съобщение в обекта на съобщенията.

Компонентът също така отнема a defaultMessage и стойности опора The defaultMessage prop указва резервно съобщение, ако преводът не е наличен за текущия локал, докато стойности prop предоставя динамични стойности за контейнерите във вашите преведени съобщения.

Например:

импортиране Реагирайте от"реагира";
импортиране { FormattedMessage } от"react-intl";
функцияПриложение() {
връщане (




 id="поздрав"
 съобщение по подразбиране=„Добро утро {name}“
 стойности={{ име: 'Джон'}}
 />
 </p>
 </div>
 );
}
износпо подразбиране Приложение;

В този кодов блок, документ за самоличност опора на Форматирано съобщение компонентът използва поздрав ключ от съобщения на френски обект, и стойности опора замества {име} заместител със стойността "Джон".

Форматиране на числа с компонента FormattedNumber

React Intl също предоставя Форматирано число компонент, който можете да използвате за форматиране на числа въз основа на текущия локал. Компонентът приема различни подпори за персонализиране на форматирането, като стил, валута и минимални и максимални дробни цифри.

Ето няколко примера:

импортиране Реагирайте от"реагира";
импортиране { Форматирано число } от"react-intl";
функцияПриложение() {
връщане (




 Десетичен знак: <Форматирано числостойност={123.456}стил="десетичен" />
 </p>


 Процент: <Форматирано числостойност={123.456}стил="процент" />
 </p>
 </div>
 );
}
износпо подразбиране Приложение;

Този пример използва Форматирано число компонент, който приема a стойност prop, указващ числото, което искате да форматирате.

Използвайки стил prop, можете да персонализирате външния вид на форматирания номер. Можете да зададете стил опора на десетичен знак, процента, или валута.

Когато зададете стил опора на валутата, на Форматирано число компонент форматира числото като валутна стойност, като използва кода, посочен в валута опора:

импортиране Реагирайте от"реагира";
импортиране { Форматирано число } от"react-intl";
функцияПриложение() {
връщане (




 Цена: <Форматирано числостойност={123.456}стил="валута"валута="ЩАТСКИ ДОЛАР" />
 </p>
 </div>
 );
}
износпо подразбиране Приложение;

The Форматирано число компонент форматира числото в кодовия блок по-горе, използвайки валута стил и щатски долар валутен код.

Можете също така да форматирате числа с определен брой десетични знаци, като използвате minimumFractionDigits и максимумДробниЦифри реквизит.

The minimumFractionDigits prop указва минималния брой дробни цифри за показване. За разлика от тях, максимумДробниЦифри prop указва максималния брой дробни цифри.

Ако дадено число има по-малко дробни цифри от посочените minimumFractionDigits, React Intl ще го допълни с нули. Ако числото има повече дробни цифри от посочените максимумДробниЦифри, библиотеката ще закръгли числото нагоре.

Ето пример, показващ как можете да използвате тези подпори:

импортиране Реагирайте от"реагира";
импортиране { Форматирано число } от"react-intl";
функцияПриложение() {
връщане (




 стойност={123.4567}
 minimumFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}
износпо подразбиране Приложение;

Форматиране на дати с компонента FormattedDate

Можете да форматирате датите по начин, който е последователен и лесен за четене, като използвате React Intl. The FormattedDate осигурява лесен и ефективен начин за форматиране на дати. Работи подобно на библиотеки за дата-час, които форматират дати, като Moment.js.

Компонентът FormattedDate приема много подпори, като напр стойност, ден, месец, и година. Реквизитът на стойността приема датата, която искате да форматирате, а другите реквизити конфигурират нейното форматиране.

Например:

импортиране Реагирайте от"реагира";
импортиране { FormattedDate } от"react-intl";
функцияПриложение() {
конст днес = новДата();
връщане (




 Днесдатата на е
 стойност={днес}
 ден="цифров"
 месец="дълъг"
 година="цифров"
 />
 </p>
 </div>
 );
}
износпо подразбиране Приложение;

В този пример, стойност prop използва текущата дата. Освен това, използвайки ден, месец, и година props, вие указвате, че искате годината, месецът и денят да се показват в дълъг формат.

Освен ден, месец и година, други подпори също форматират външния вид на датата. Ето подпорите и стойностите, които приемат:

• година: "числово", "2-цифрено"
• месец: "цифрен", "двуцифрен", "тесен", "къс", "дълъг"
• ден: "числово", "2-цифрено"
• час: "числово", "2-цифрено"
• минута: "числово", "2-цифрено"
• второ: "числово", "2-цифрено"
• име на часова зона: "къс", "дълъг"

Можете също да използвате FormattedDate компонент за форматиране и време за показване:

импортиране Реагирайте от"реагира";
импортиране { FormattedDate } от"react-intl";
функцияПриложение() {
конст днес = новДата();
връщане (




 Часът е
 стойност={днес}
 час="цифров"
 минута="цифров"
 второ="цифров"
 />
 </p>
 </div>
 );
}
износпо подразбиране Приложение;

Интернационализирайте вашите React приложения за по-широка аудитория

Научихте как да инсталирате и настроите библиотеката React-Intl във вашето приложение React. React-intl улеснява форматирането на числата, датите и валутите на вашето React приложение. Можете да форматирате данни въз основа на локала на потребителя, като използвате компонентите FormattedMessage, FormattedNumber и FormattedDate.

Разработчиците на React често правят грешки, които могат да доведат до сериозни последствия. Например неуспешно актуализиране на състоянието правилно. Важно е да сте наясно с тези често срещани грешки и да ги коригирате навреме, за да избегнете скъпи проблеми.