html - 根据条件删除 detailPanel 导致填充

Question

大家，我正在尝试根据条件添加detailPanel，当我像这样隐藏它时它会留下一个空格 Link

当我提供 detail panel

时，这段代码工作正常

get rowDetailsPanel() {
const { detailPanel, classes } = this.props;
// @Workarround To Hide Details Panel In Case There is No Details Panels Provided
return [
  {
    tooltip: 'Show Name',
    disabled: !detailPanel,
    icon: () => <ChevronRightIcon className={!detailPanel && classes.displayNone}/>,
    render: rowData => detailPanel(rowData)
  },
];

Link用于工作 detailPanel,

所以我想做的是当我隐藏 detailPanel 时，我想删除整个列

任何线索将不胜感激

Answer 1

这应该有效:

get rowDetailsPanel() {
const { detailPanel, classes } = this.props;
// @Workarround To Hide Details Panel In Case There is No Details Panels Provided
return detailPanel ? [
  {
    tooltip: 'Show Name',
    disabled: !detailPanel,
    icon: () => <ChevronRightIcon className={!detailPanel && classes.displayNone}/>,
    render: rowData => detailPanel(rowData)
  },
] : undefined;