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

【问题标题】：How to translate the content of a <SelectInput /> or any other components?如何翻译 <SelectInput /> 或任何其他组件的内容？
【发布时间】：2020-04-09 16:33:19
【问题描述】：

在 react admin v3 中，

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

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

这是我的<CallMeBackCreate /> 组件：

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

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

例如这是该实体的列表：

[
  {
    "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，这怎么可能？

【问题讨论】：

看起来是个有趣的挑战。所以你想使用这样的东西：<SelectInput optionText=translate(slug) />。免责声明：这可能还行不通，这是一个示例，以确保我理解您的意图。
是的，这就是目的。
嗯，挑战是如何让useTranslate() 唯一地翻译每个slug。棘手的一个，到目前为止运气好吗？
不，还没有，我认为这实际上是不可能的。我想我会编辑记录实体，以便使用<SelectInput /> 可以读取翻译后的值。
确实如此，可能是对未来版本的一个很好的补充。你不觉得吗？

标签： javascript reactjs react-admin

【解决方案1】：

SelectInput 单独有一个可选的 prop translateChoice，默认为 true，但我不知道父 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>
)
}

【讨论】：