Для максимально широкой аудитории ваше приложение должно общаться на разных языках. Узнайте, как сделать эту задачу менее сложной.

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

Вы можете легко поддерживать несколько языков и локалей в своем приложении React с помощью ReactIntl.

Установка React Intl

Чтобы использовать библиотеку React Intl, ее необходимо сначала установить. Вы можете сделать это с более одного менеджера пакетов: npm, пряжа или pnpm.

Чтобы установить его с помощью npm, запустите эту команду в своем терминале:

npm установить реакцию-интл

Чтобы установить его с помощью пряжи, выполните эту команду:

пряжа добавить реагировать-intl

Как использовать международную библиотеку React

После того, как вы установили библиотеку React Intl, вы можете использовать ее компоненты и функции в своем приложении. React Intl имеет функции, аналогичные Международный API JavaScript.

instagram viewer

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

Компонент FormattedMessage отображает переведенные строки в вашем приложении, а компонент IntlProvider предоставляет вашему приложению информацию о переводах и форматировании.

Вы должны создать файл перевода, прежде чем сможете начать использовать компоненты FormattedMessage и IntlProvider для перевода вашего приложения. Файл перевода содержит все переводы для вашего приложения. Вы можете создать отдельные файлы для каждого языка и локали или использовать один файл, содержащий все переводы.

Например:

экспортконстанта messagesInFrench = {
 приветствие: "Бонжур {имя}"
}

экспортконстанта messagesInItalian = {
 приветствие: "Буонджорно {имя}"
}

Этот пример файла перевода содержит два объекта перевода: сообщенияНа французском языке и сообщения на итальянском языке. Вы можете заменить заполнитель {имя} в приветствие строка во время выполнения с динамическим значением.

Чтобы использовать переводы в вашем приложении, вы должны обернуть корневой компонент вашего приложения с помощью IntlProvider компонент. Компонент IntlProvider занимает три Реагировать на реквизит: место действия, локаль по умолчанию, и Сообщения.

Свойство локали принимает строку, указывающую локаль пользователя, в то время как defaultLocale указывает запасной вариант, если предпочитаемая локаль пользователя недоступна. Наконец, свойство messages принимает объект перевода.

Вот пример, показывающий, как вы можете использовать IntlProvider:

Импортировать Реагировать от"реагировать";
Импортировать РеактДОМ от"реагировать дом/клиент";
Импортировать Приложение от"./Приложение";
Импортировать {Международный провайдер} от"реагировать-между";
Импортировать { сообщения на французском языке } от"./перевод";
ReactDOM.createRoot(документ.getElementById("корень")).оказывать(

"фр" сообщения = {messagesInFrench} defaultLocale ="ан">

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

Этот пример проходит фр локаль, сообщенияНа французском языке перевод и по умолчанию en локаль для IntlProvider компонент.

Вы можете передать более одной локали или объекта перевода, и IntlProvider автоматически определит язык браузера пользователя и использует соответствующие переводы.

Чтобы отобразить переведенные строки в вашем приложении, используйте Отформатированное сообщение компонент. Отформатированное сообщение компонент принимает идентификатор prop, соответствующий идентификатору сообщения в объекте messages.

Компонент также принимает сообщение по умолчанию и ценности опора сообщение по умолчанию prop указывает резервное сообщение, если перевод недоступен для текущей локали, в то время как ценности prop предоставляет динамические значения для заполнителей в ваших переведенных сообщениях.

Например:

Импортировать Реагировать от"реагировать";
Импортировать { Форматированное сообщение } от"реагировать-между";
функцияПриложение() {
возвращаться (





 идентификатор ="приветствие"
 сообщение по умолчанию ="Доброе утро, {имя}"
 значения = {{ имя: 'Джон'}}
 />
 </p>
 </div>
 );
}


экспортпо умолчанию Приложение;

В этом кодовом блоке идентификатор опора Отформатированное сообщение компонент использует приветствие ключ от сообщенияНа французском языке объект, и ценности опора заменяет {имя} заполнитель со значением "Джон".

Форматирование чисел с помощью компонента FormattedNumber

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

Вот некоторые примеры:

Импортировать Реагировать от"реагировать";
Импортировать {Форматированный номер} от"реагировать-между";
функцияПриложение() {
возвращаться (





 Десятичная дробь: <Форматированный номерценить={123.456}стиль="десятичная дробь" />
 </p>



 Процент: <Форматированный номерценить={123.456}стиль="процент" />
 </p>
 </div>
 );
}


экспортпо умолчанию Приложение;

В этом примере используется Форматированный номер компонент, который принимает ценить prop, указав число, которое вы хотите отформатировать.

Используя стиль prop можно настроить внешний вид отформатированного числа. Вы можете установить стиль поддерживать десятичная дробь, процент, или валюта.

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

Импортировать Реагировать от"реагировать";
Импортировать {Форматированный номер} от"реагировать-между";
функцияПриложение() {
возвращаться (





 Цена: <Форматированный номерценить={123.456}стиль="валюта"валюта="ДОЛЛАР США" />
 </p>
 </div>
 );
}


экспортпо умолчанию Приложение;

Форматированный номер компонент форматирует число в кодовом блоке выше, используя валюта стиль и доллар США код валюты.

Вы также можете форматировать числа с определенным количеством знаков после запятой, используя минимальный дробный разряд и максимальная дробная цифра реквизит.

минимальный дробный разряд prop указывает минимальное количество отображаемых цифр дроби. Напротив, максимальная дробная цифра prop указывает максимальное количество дробных цифр.

Если в числе меньше цифр дроби, чем указано минимальный дробный разряд, React Intl дополнит его нулями. Если в числе больше цифр дроби, чем указано максимальная дробная цифра, библиотека округлит число в большую сторону.

Вот пример, показывающий, как вы можете использовать эти реквизиты:

Импортировать Реагировать от"реагировать";
Импортировать {Форматированный номер} от"реагировать-между";
функцияПриложение() {
возвращаться (





 значение = {123.4567}
 минимальная фракция цифр = {2}
 maxFractionDigits={3}
 />
 </p>
 </div>
 );
}


экспортпо умолчанию Приложение;

Форматирование дат с помощью компонента FormattedDate

Вы можете форматировать даты таким образом, чтобы они были последовательными и легко читаемыми, используя React Intl. ФорматированнаяДата Компонент предоставляет простой и эффективный способ форматирования дат. Он работает аналогично библиотеки даты и времени, которые форматируют даты, такие как Moment.js.

Компонент FormattedDate принимает множество реквизитов, таких как ценить, день, месяц, и год. Свойство value принимает дату, которую вы хотите отформатировать, а другие свойства настраивают ее форматирование.

Например:

Импортировать Реагировать от"реагировать";
Импортировать { Дата Формата } от"реагировать-между";
функцияПриложение() {
константа сегодня = новыйДата();


возвращаться (





 Сегоднядата
 значение = {сегодня}
 день ="числовой"
 месяц ="длинный"
 год ="числовой"
 />
 </p>
 </div>
 );
}


экспортпо умолчанию Приложение;

В этом примере ценить prop использует текущую дату. Также с помощью день, месяц, и год props вы указываете, что хотите, чтобы год, месяц и день отображались в длинном формате.

Наряду с днем, месяцем и годом другие реквизиты также форматируют внешний вид даты. Вот реквизиты и значения, которые они принимают:

  • год: "числовой", "двухзначный"
  • месяц: «числовой», «двухзначный», «узкий», «короткий», «длинный».
  • день: "числовой", "двухзначный"
  • час: "числовой", "двухзначный"
  • минута: "числовой", "двухзначный"
  • второй: "числовой", "двухзначный"
  • timeZoneName: «короткий», «длинный»

Вы также можете использовать ФорматированнаяДата компонент для форматирования и отображения времени:

Импортировать Реагировать от"реагировать";
Импортировать { Дата Формата } от"реагировать-между";
функцияПриложение() {
константа сегодня = новыйДата();


возвращаться (





 Время
 значение = {сегодня}
 час="числовой"
 минута ="числовой"
 второй="числовой"
 />
 </p>
 </div>
 );
}


экспортпо умолчанию Приложение;

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

Вы узнали, как установить и настроить библиотеку React-Intl в вашем приложении React. React-intl упрощает форматирование чисел, дат и валют вашего приложения React. Вы можете форматировать данные в зависимости от языкового стандарта пользователя, используя компоненты FormattedMessage, FormattedNumber и FormattedDate.

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