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

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>, который поддерживает пользовательские элементы без необходимости использования какой-либо сторонней библиотеки?

EDIT:

Следующий код (который в значительной степени идентичен коду из официальных документов) выдает исключение 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

Надеюсь, эти заметки сэкономят кому-то время.Ответ Найтбертона не работает в моем случае.Возможно, это связано с тем, что я импортировал функцию 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>