Простое руководство о том, как сделать ваше приложение React более доступным.
Результат:
0. Структура проекта (необязательно)
Это структура проекта, которую я использовал, несмотря на то, что мне не нужно следовать руководству, я думаю, что это должно помочь вам лучше понять, а также послужить подсказкой.
1. Установка зависимостей
Нам понадобятся только 3 зависимости:
2. Настройка всего
Файл конфигурации:
i18n/index.js
После завершения настройки просто вызовите этот файл в корневом файле вашего приложения (index.js).
3. Добавление переводов
Переводы представляют собой объект JS
Один файл для каждого языка. (внутри папки локалей)
Используйте файл . (точка) для доступа к вложенным свойствам, например,
"home.message"
i18n/locales/en-us.js
i18n/locales/pt-br.js
i18n/locales/index.js
4. Выбор языков
Мы собираемся создать компонент выбора языка.
Два флага (Бразилия и США), которые меняют язык всего приложения при нажатии.
Прежде всего, я покажу компонент флага, а затем компонент, содержащий флаги и функции.
components/I18n/Flag.js
компоненты/I18n/I18n.js
Вы можете разместить этот компонент где угодно, я поместил свой в файл App.js.
5. Использование переводов
Как было показано ранее, хук useTranslation возвращает функцию, которая позволяет нам переводить вещи, но вместо того, чтобы везде использовать этот хук и эту функцию, мы собираемся абстрагировать эту логику в компонент с именем Переводчик.
components/I18n/Translator.js
Таким образом, мы можем очень легко перевести все, например.
Вот и все. Легко, не так ли?
Ссылка на репозиторий: https://github.com/lucaspinheirogit/react-i18n-tutorial
Надеюсь, вам понравилось. Не стесняйтесь задавать вопросы.
