React.js Подходящая структура приложения на нескольких языках

#javascript #reactjs

#javascript #reactjs

Вопрос:

Справочная информация: Я использую Django в качестве фреймворка для серверной части, здесь у меня есть одно приложение с несколькими моделями (по одной на каждый язык) и React.js в качестве основы для интерфейса. Как только основная версия будет завершена, я хочу сделать сайт многоязычным.

Вопрос: Должен ли я дублировать исходное приложение (скажем, это приложение на английском языке), развернуть эти две версии или, возможно, создать эти версии внутри основной версии?

Пример структуры каталогов A

 mainAPP-EN
mainAPP-ES
  

Пример структуры каталогов B

 mainAPP
  -> EN
  -> ES
  

Примечание. Сайт не сложный, поэтому оба варианта подходят для меня.
Заранее благодарю вас за ваше время и помощь!

Комментарии:

1. попробуйте использовать некоторую библиотеку и избегайте дублирования кода. смотрите здесь некоторый пример

Ответ №1:

Для этого вам не нужно несколько модулей. На самом деле я бы настоятельно рекомендовал вам этого не делать, это станет очень сложно поддерживать (Т. Е. ошибки и функции должны быть исправлены на каждом языке).

Поддержка Django для нескольких локалей великолепна (официальные документы):

 from django.utils.translation import gettext as _

def my_view(request):
    output = _("Welcome to my site.")
    return HttpResponse(output)
  

На стороне React существует множество библиотек, одна из которых мне нравится за ее простоту — это Airbnb’s Polyglot:

 const SPANISH_PHRASES = {
  locale: 'es',

  phrases: {
    "hello": "hola"
  },
};

const polyglot = new Polyglot(SPANISH_PHRASES);

polyglot.t("hello"); // returns "hola"
  

Обычно вы хотели бы определить, скажем, Translate компонент, который выполняет это под капотом:

 // basic example, needs more elaboration!
export default function Translate({ phrase }) {
  return <span>{ polyglot.t(phrase) }</span>
}
  

Затем, чтобы использовать его:

 function SomeComponent() {
  return (
   <SomeMenu><Translate phrase="hello" /></SomeMenu>
  );
}
  

Комментарии:

1. Я заметил, что вы определили locale='es' , могу ли я определить больше языков в одном и том же var или мне следует создать новый полиглот, скажем, polyglotES и polyglotFR?

2. Вам действительно нужно было бы перезаписать объект Polyglot новым, например: let polyglot = new Polyglot(PHRASES_FR) . locale В основном необходимо настроить множественное число для корректной работы (например, в русском языке есть несколько способов использовать множественное число, в китайском его нет и т.д.).