Как скрыть несколько полей в Reaction-Admin ShowView?

Question

Я пытаюсь скрыть набор полей на основе значения другого поля, но следующие условия никогда не будут отображать условные поля:

export const ServiceShow = (props) => (
<ShowController {...props}>
  {controllerProps =>
  <ShowView component="div" {...props} {...controllerProps}>
    <TabbedShowLayout>
      <Tab label="General">
        {controllerProps.record && controllerProps.record.maintenance &&
         controllerProps.record.maintenance.active &&
           <>
            <Alert severity="warning">Maintenance period active</Alert>
            <DateField label="Maintenance Start" src="maintenance.start" />
            <DateField label="Maintenance End" srvc="maintenance.end" />
            <TextField label="Maintenance Message" source="maintenance.msg" />
          </>
        }
     </Tab>
    </TabbedShowLayout>
  </ShowView>
  }
</ShowController>
);

<Alert> отображается просто отлично, но Field компонентов нет. Я очень новичок в React, так что, вероятно, простая вещь.

Примечание: Если в качестве условного вывода указать один <TextField>, то он будет работать, но, например, внутри React.Fragment или <div> ничего не получится.

Answer 1

Причина, по которой оповещение появляется, а поля нет, заключается в том, что для полей требуются дополнительные реквизиты, передаваемые прямым родительским реагированием-администрированием, в данном случае Tab. <> тоже должен пропустить такой реквизит, но, похоже, это не так. И именно поэтому один <TextField> в качестве дочернего элемента корректно отображает

Вы можете создать компонент, который будет передавать реквизиты ниже по потоку дочерним элементам.

export const ServiceShow = (props) => (
<ShowController {...props}>
  {controllerProps =>
  <ShowView component="div" {...props} {...controllerProps}>
    <TabbedShowLayout>
      <Tab label="General">
          <Maintenance/>
     </Tab>
    </TabbedShowLayout>
  </ShowView>
  }
</ShowController>
);

const Maintenance = props => (
    {props.record && props.record.maintenance && props.record.maintenance.active && 
        <>
            <Alert {...props} severity="warning">Maintenance period active</Alert>
            <DateField {...props} label="Maintenance Start" src="maintenance.start" />
            <DateField {...props} label="Maintenance End" srvc="maintenance.end" />
            <TextField {...props}label="Maintenance Message" source="maintenance.msg" />
        </>
    }
)