Простое решение для интернационализации внешнего интерфейса на основе React-hook

Предисловие 💬

• выполнитьReactДля интернационализации проекта мы должны упомянуть самые популярные библиотеки в отрасли:react-intl, проект Yahoo с открытым исходным кодом для интернационализации языков.formatjsчасть компонентов, посредством которых он обеспечивает иapiдопустимыйReactРеализовать многоязычную поддержку в проекте.
• react-intlСамым большим преимуществом является то, что он используетpropsЯзыковой пакет внедряется в языковой пакет, и отображаемый язык можно изменить напрямую, без перезагрузки страницы, и есть два основных недостатка:
  • Может применяться только к слою вида, поддерживается только вjsxсодержимое файла (т.React.Component), не поддерживается в общемjs😫 используется в объектах.
  • Он оформлен в виде завернутого компонента.React.ComponentТаким образом, компонентное поведение изменилось во многих отношениях и является более инвазивным 😱.
• Найдено в разработке, для достижения интернационализации используйтеreact-intlЭтапы интернационализации библиотеки все еще относительно громоздки, и конкретные шаги не являются предметом рассмотрения в этой статье (портал 👉:react-intl реализует интернационализацию React на нескольких языках), и хотя эта библиотека предоставляет множество компонентов, в большинстве случаев вам нужно использовать только<FormattedMessage/>Для этого компонента действительно нет необходимости покупать весь лес 🤷‍♀️ за один 🌲.
• Основываясь на упомянутых выше проблемах, в данной статье будут представленыReact-hookРеализован набор простых интерфейсных решений интернационализации (уже вReactОн был использован в проекте и до сих пор не сталкивался с какими-либо проблемами).

Отображение эффекта 🤩

Идеи развития 🤔

• использовалreact-intlСтуденты библиотеки знают, что библиотека предоставляет<IntlProvider/>Компоненты используются для предоставления контекста интернационализации: при использовании<IntlProvider/>При обертывании компонента сам компонент и подкомпоненты, содержащиеся внутри компонента, могут получить всеreact-intlпредоставляемый интерфейс и в<IntlProvider/>введен вlocaleСодержимое файла конфигурации.
• Фактически, когда мы создаем интернационализированные файлы ресурсов в разных языковых версиях, если язык определен, соответствующий файл языковой версии может использоваться какdictionaryИспользование запроса в компоненте. Интернационализированные файлы ресурсов на китайском и английском языках выглядят примерно так 👇:

• мы можем использоватьReactкоторый предоставилcreateContextметод созданияReactконтекст (Context) используется для хранения текущей языковой версии, а затемContext.ProviderВ качестве самой внешней оболочки наших компонентов (обычно<App/>),но<App/>Можно использовать сам компонент и подкомпоненты, содержащиеся в нем, если он является функциональным компонентом.useContextспособ получить текущую языковую версию, согласно соответствующемуdictionaryПеревести текст.
• Как упоминалось ранее,react-intlБиблиотеки могут быть интернационализированы только в компонентах, а не в общемjsиспользуется в объекте. Чтобы решить эту проблему, мы можем хранить текущую языковую версию глобально.currentLang, когда языковая версия переключается, глобальная переменная обновляется, а API, предоставляемый файлом js, должен основываться только на текущейcurrentLangЗначение выбирает соответствующую языковую версиюdictionary, и передать входящийkeyСкопируйте перевод (взятьvalue) может быть использован.

• Для тех, кто не понимает, не паникуйте.Здесь я сначала представлю идею реализации всего решения и как его реализовать.Давайте посмотрим ниже 🚶 После прочтения кода и оглядываясь назад на идею, она может быть яснее.

Получить/переключить текущую языковую версию

• поставкаgetLangМетод используется для получения текущей языковой версии (в основном используется файлами js), используется для иsetLangМетод используется для переключения текущей языковой версии, соответствующий код выглядит следующим образом:

• Внимательные студенты обнаружили, что код также имеетupdaterListэта переменная при вызовеsetLangметод, он будет проходить последовательноupdaterListметод внутри и выполнить связанный метод. упомянуто ниже<IntlProvider/>компоненты будут включатьupdaterListизменение значения.

Реализовать компонент IntlProvider

• использоватьReactкоторый предоставилcreateContextметод созданияReactконтекст (Context) используется для хранения текущей языковой версии, и соответствующие коды следующие:

• БудуContext.ProviderКак самая внешняя оболочка вокруг нашего компонента:

Реализуйте компонент FormattedMessage

• <FormattedMessage/>Компонент поддерживает входящиеid(обязательно) и параметрыargs(необязательно), соответствующий код выглядит следующим образом:

• от<FormattedMessage/>Как видно из кода реализации компонента, основной код должен вызывать пользовательскийhook(которыйuseFormatMessageметод), который использует преимущества строкиsplitМетод может использовать регулярное выражение для разделения, чтобы результат содержал характеристики разделенного блока (портал 👉:Документация MDN), и использоватьuseContextспособ получить<IntlProvider/>Языковая версия, в которой хранится компонент.
• Использование в компоненте:

Реализовать API, который поддерживает простые объекты js.

• Чтобы обычные js-объекты могли использовать функцию интернационализации, мы предоставляем два метода обработки без параметров (getRawTextметод) и с параметрами (getFormattedTextметод, когда никакие параметры не передаются, он эквивалентенgetRawTextметод):

• Чтобы интернационализировать сообщение об ошибке, когда интерфейс сообщает об ошибке:

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

Резюме 👀

• На данный момент более популярной библиотеки с открытым исходным кодомreact-intlВ проекте есть недостатки, такие как громоздкая настройка, применимая только к слою просмотра, и сильное вмешательство.React-hookРеализована простая схема интернационализации внешнего интерфейса, то есть широко используемые компоненты иapi, и использовать в проекте.
• Не по теме: дляreact-intlДефекты в библиотеке, Али запустилreact-intl-universalБиблиотека, эта библиотека также очень удобна в использовании и предоставляет более богатые функции.Что касается того, почему вам стоит написать набор решений самостоятельно, то это вопрос мнения, ведь в проекте используется лишь небольшое количество компонентов и комплектующих.api, Поняв принцип, также можно реализовать в проекте набор решений интернационализации.

Если есть какие-либо упущения или ошибки в вышеуказанном содержании, пожалуйста, оставьте сообщение ✍️Укажите и продвигайтесь вперед вместе💪💪💪

Если вы считаете, что эта статья полезна для вас, 🏀🏀 оставьте свой драгоценный 👍

Ссылки 📖

1. Знание — интернационализация интерфейса React
2. Документация по использованию React Intl
3. react-intl реализует интернационализацию React на нескольких языках
4. CreateContext и useContext в React Hook для прозрачной передачи контекста между компонентами и оптимизации производительности.
5. Расширение: реагировать-международный-универсальный