Как использовать опцию "Перевести внутрь" по реакции на загрузку

Question

Я использую react-bootstrap для рендеринга моего выпадающего списка, и я пытаюсь передать пользовательский элемент к параметрам. Мне нужно отобразить переведенные значения в раскрывающемся списке:

<Form.Label ><Translate id="labels.sortKey" /></Form.Label>
<Form.Control as="select" value={props.sort.key} onChange={(e) => props.sortAction(e.target.value)}>
        <option value="name"><Translate id="basic.name" /></option>
        <option value ="state"><Translate id="basic.state" /></option>
</Form.Control>

К сожалению, это выглядит как [Object object] вместо переведенного значения я получаю ошибку Only strings and numbers are supported as <option> children,

Есть ли какой-то альтернативный элемент, который я мог бы использовать вместо <option> который поддерживает пользовательские элементы без необходимости использования какой-либо сторонней библиотеки?

РЕДАКТИРОВАТЬ:

Следующий код (который в значительной степени идентичен коду из официальных документов) выдает исключение translate is not a function:

<Translate>
    {translate =>
     <h1>{ translate('test') }</h1>
    }
</Translate>

Answer 1

На основе react-localize-redux документы ( функция перевода), попробуйте обернуть все Form.Control внутри Translate компонент, а затем использовать translate функция.

<Translate>
  <Form.Control
    as="select"
    value={props.sort.key}
    onChange={(e) => props.sortAction(e.target.value)}
  >
    <option value="name">
      {{ translate } => translate("basic.name")}
    </option>
    <option value="state">
      {{ translate } => translate("basic.state")}
    </option>
  </Form.Control>
</Translate>

Answer 2

Надеюсь, эти заметки кому-то сэкономят время. Ответ Knightburton не работает в моем случае. Может это потому, что я импортировалreact-jhipsterтрансляционная функция. вот код

import { Translate, translate } from 'react-jhipster';

...

<AvField id="type" type="select" className="form-control">
  <option className="form-control" value="01">
    { translate("type1") }
  </option>
  <option className="form-control" value="02">
    { translate("type2") }
  </option>
</AvField>

Answer 3

Если вы используете reactjs и для вашего языкового перевода вы решили использовать пакет (react-il8n), просто сделайте следующее:

Это ваш файл раскрывающегося списка.

      import React, { useState } from "react";
import il8n from "./i18n.js";
import { withNamespaces } from "react-i18next";

const LanguageDropdown = ({ t, props }) => {
  const changeLanguage = (language) => {
    il8n.changeLanguage(language);
  };

  return (
    <li className="nav-item d-none d-md-block">
      <a className="nav-link" href="javascript:void(0)">
        <div className="customize-input">
          <select
            className="custom-select form-control bg-white custom-radius custom-shadow border-0"
            onChange={(e) => changeLanguage(e.target.value)}
          >
            <option value="">{t("Choose Language")}....</option>
            <option value="en">{t("English")}</option>
            <option value="fe">{t("French")}</option>
          </select>
        </div>
      </a>
    </li>
  );
};

export default withNamespaces()(LanguageDropdown);