如何翻译 <SelectInput /> 或任何其他组件的内容？

Question

在 React Admin v3 中，

我正在从我实体内的服务器发送 slug。

slug 是 key 应该分配给翻译客户端。

这是我的 <CallMeBackCreate /> 组件：

    <Create {...props}>
      <SimpleForm>
        <ReferenceInput
          source="status.id"
          reference="callmeback"
        >
          <SelectInput optionText="description" />
        </ReferenceInput>
      </SimpleForm>
    </Create>

而不是使用 description 我想使用 slug 并翻译客户端，

例如，这是这个实体的列表：

[
  {
    "description": "Refused",
    "slug": "refused"
  },
  {
    "description": "Accepted",
    "slug": "accepted"
  },
  {
    "description": "Abandoned",
    "slug": "abandoned"
  },
  {
    "description": "Wrong number",
    "slug": "wrong-number"
  },
  {
    "description": "To renew call back",
    "slug": "to-renew-call-back"
  },
  {
    "description": "To call back",
    "slug": "to-call-back"
  }
]

我希望使用 slug 翻译 FR 和 EN，这怎么可能？

Answer 1

单独的 SelectInput 有一个默认为 true 的可选属性 translateChoice，但我不知道父 ReferenceInput 设置了什么值，如果有的话。

SelectInput optionText 也接受一个函数，接收选择并期待字符串结果。

所以你可以试试这个：

https://marmelab.com/react-admin/Inputs.html#selectinput

import { useTranslate } from 'react-admin'

export const CallMeBackCreate  = props => {

const translate = useTranslate()

return (
   <Create {...props}>
      <SimpleForm>
        <ReferenceInput
          source="status.id"
          reference="callmeback"
        >
          <SelectInput
              optionText={choice => translate(choice.slug)}
              //OR translateChoice={true} optionText="slug"
          />
        </ReferenceInput>
      </SimpleForm>
    </Create>
)
}

如何翻译 <SelectInput /> 或任何其他组件的内容？

How to translate the content of a <SelectInput /> or any other components?

javascript

reactjs

react-admin