如何在 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> 作为条件输出，那么它将起作用，但 React.Fragment 或<div>例如，它不起作用。

Answer 1

Alert 出现而 Fields 不出现的原因是因为 Fields 需要 react-admin 直接 parent 传递的附加道具，在这种情况下，Tab。 <> 也应该传递这样的道具，但看起来不是。这就是为什么单个 <TextField> 作为 child 正确呈现

您可以创建一个组件，将 props 下游传递给 childs。

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" />
        </>
    }
)

如何在 react-admin ShowView 中隐藏多个字段？

How to hide multiple fields in react-admin ShowView?

reactjs

react-admin