如何在 react-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>作為條件 output 則它將起作用，但例如React.Fragment或<div>中的任何內容，它都不起作用。

Answer 1

Alert 出現而 Fields 不顯示的原因是因為 Fields 需要 react-admin 直接父級傳遞的附加道具，在這種情況下，是 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" />
        </>
    }
)