Как перевести содержание или какие-то другие компоненты?

Question

В реакции администратора v3,

Я отправляю с серверов внутри моей сущности slug.

Слаг - key, который должен быть назначен стороне клиента перевода. .

Это мой <CallMeBackCreate /> компонент:

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

Вместо использования description Я хотел бы использовать slug и перевести клиентскую сторону,

* 1016. * Например, вот список этой сущности:

[
  {
    "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 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>
)
}