1

我正在使用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>
4

3 回答 3

3

根据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>
于 2019-04-30T21:33:56.470 回答
1

I hope, this notes would save someone time. knightburton's answer does not work in my case. Maybe that's because I imported react-jhipster's transelate function. here is code 

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>
于 2019-07-11T10:02:11.477 回答
0

If you are using reactjs and for your language translation you choose to use (react-il8n) package just do this:

This is your dropdown component file.

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);
于 2021-10-28T16:10:53.310 回答