Блог

В react-admin, как мне получить доступ к свойствам записи, чтобы отображать только определенные компоненты на основе значения свойства записи?

В следующем коде я хочу показывать токен-носитель только в том случае, если имя записи не «Все»; если имя записи «Все», то показывать только в том случае, если роль пользователя «администратор».

Я получаю «Uncaught TypeError: не удается прочитать свойство ‘name’ неопределенного» в компоненте OrgShow, показанном ниже, который, как я полагаю, говорит о том, что нет «реквизита». Я также пробовал использовать «запись» и «имя», но ни один из них не доступен.

 export const OrgShow = ({ permissions, ...props }) => (
  <Show permissions={permissions} title={<Title />} {...props}>
    <SimpleShowLayout permissions={permissions}>
      <TextField source="id" />
      <TextField source="name" />
      {
        (props.record.name === 'All' amp;amp; permissions === 'admin') || (props.record.name !== 'All' amp;amp; permissions === 'user')
          ? <TextField source="bearer_token" />
          : [
            <FunctionField label='Bearer Token' render={record => obfuscator(record.bearer_token)} />,
            <Alert severity="warning">You are not authorized for this org.</Alert>
          ]
      }
    </SimpleShowLayout>
  </Show>
);
 

Обновить:
В итоге я решил это с помощью компонента FunctionField, который, я думаю, похож на решение user striped; основное отличие заключается в том, что FunctionField, по-видимому, отлично подходит для одноразовой функции, тогда как создание нового компонента кажется целесообразным, если вы собираетесь использовать эту логику для более чем одного источника. В любом случае, вот решение, которое я придумал:

 export const OrgShow = ({ permissions, ...props }) => (
  <Show permissions={permissions} title={<Title />} {...props}>
    <SimpleShowLayout permissions={permissions}>
      <TextField source="id" />
      <TextField source="name" />
      <FunctionField permissions={permissions} label='Bearer Token' render={record => {
        if ((record.name === 'All' amp;amp; permissions === 'admin') || record.name !== 'All') {
          return record.bearer_token
        } else {
          return obfuscator(record.bearer_token)
        }
      }} />
    </SimpleShowLayout>
  </Show>
);
 

Я думаю, что вам нужно создать определенный компонент. Запись должна автоматически распространяться на дочерний элемент:

 const MyComponent = (props) => {
  return (props.record.name === 'All' amp;amp; props.permissions === 'admin') || (props.record.name !== 'All' amp;amp; props.permissions === 'user')
    ? <TextField source="bearer_token" record={props.record}/>
    : [
      <FunctionField label='Bearer Token' record={props.record} render={record => obfuscator(record.bearer_token)} />,
      <Alert severity="warning">You are not authorized for this org.</Alert>
    ]
}

export const OrgShow = ({ permissions, ...props }) => (
  <Show permissions={permissions} title={<Title />} {...props}>
    <SimpleShowLayout permissions={permissions}>
      <TextField source="id" />
      <TextField source="name" />
      <MyComponent permission={permissions} />
    </SimpleShowLayout>
  </Show>
);