javascript - 如何在 react-bootstrap select 选项中使用 Translate

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 文档 ( translate function )，尝试将整个 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>