Есть ли способ вернуть компонент React в виде строки вместо объекта?

Question

Я хочу представить многоязычную систему.У меня есть функциональный компонент, который возвращает перевод определенного элемента на основе выбранного языка (из Context API).

Все работает хорошо, пока я не помещу переведенный элемент в форму (значение параметра, заполнитель и т. Д.)- тогда он появляется как [объектный объект].

Вот где рождаются 2 вопроса:

1. Можно ли вернуть этот компонент в виде строки типаФормы HTML будут принимать?

2. Можно ли применить потребитель контекста к чистой функции JS, чтобы он не возвращал компонент React, а примитивное значение?

Компонент перевода:

const Translation = ({ element }) => {
  let translation;

  return (
    <LanguageConsumer>
      {({ language }) => {
        switch (language) {
          case "pl":
            translation = plTranslation;
            break;

          case "en":
            translation = enTranslation;
            break;

          default:
            translation = enTranslation;
        }

        return translation[element];
      }}
    </LanguageConsumer>
  );
};

Пример:

<option value="en">
  <Translation element="globalLanguageEnglish" />
</option>

Заранее благодарен за помощь.

Answer 1

Использование компонентов для простого возврата строки - плохой выбор. будет очень неэффективно , если вам потребуется много переведенных строк в одном компоненте.

Посмотрите, как это делается на готовых решениях i18n, таких как i18next, описанных здесь - передайте функцию 't' и используйте ее для доступа к вашим переводам.