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

Question

我正在使用 react-bootstrap 来呈现我的 select 下拉列表，并且我正在尝试将自定义元素传递给选项。我需要在下拉列表中显示翻译后的值：

<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>

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);

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

How to use Translate inside react-bootstrap select option

javascript

react-bootstrap

react-localize-redux