如何翻译 或任何其他组件的内容？

Question

在react admin v3中，

我正在从我实体内的服务器发送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单独有一个可选的prop transformChoice属性，默认为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)}
              //OR translateChoice={true} optionText="description"
          />
        </ReferenceInput>
      </SimpleForm>
    </Create>
)
}