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函数。 / p>

<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

我希望，此笔记可以节省某人的时间。在我的情况下，奈特伯顿的答案不起作用。也许是因为我导入了const newValue = values => { const condition = "SUCCESS" return values.map(value => ({ ...value, codes: condition === "SUCCESS" ? "Success Test" : 'Fail Test' })); }的翻译功能。这是代码

react-jhipster

如何在react-bootstrap选择选项中使用翻译

2 个答案: