MUI \"Master Detail\" 禁用功能答案

【问题标题】：MUI "Master Detail" disable functionalityMUI \"Master Detail\" 禁用功能
【发布时间】：2023-01-22 17:30:12
【问题描述】：

关于MUI的Master Detail特性；当exporting to CSV from a Data Grid 在实现主从细节时，CSV 导出功能停止工作（可以理解）。从技术上讲它有效但只导出第一行（在我的例子中）。我四处寻找主要细节的禁用功能，就像 disableRowGrouping prop for groups 但找不到一个。此功能是否存在，如果不存在，您对我如何打开和关闭 Master Detail 道具有什么建议吗？

我确实尝试使用状态和 {!!someState ? getDetailPanelContent={({ row }) => <div>Row ID: {row.id}</div>}: false} 这样的三元语句有条件地将主细节功能添加到 DataGridPro 组件，但是无法这样做。我不确定你是否可以拥有条件组件道具。这是在使用 spread operator 时吗？如果是这样，也许有人可以举例说明如何将这两者一起实施？

【问题讨论】：

标签： javascript reactjs material-ui master-detail

【解决方案1】：

我相信这就是您所说的菜鸟错误。我正在对整个属性应用三元运算，而不仅仅是属性的值。

错误：{!!someState ? getDetailPanelContent={({ row }) => <div>Row ID: {row.id}</div>}: false}

正确：{getDetailPanelContent= {!!someState ? {({ row }) => <div>Row ID: {row.id}</div>}: false} : null}。

这是一个代码 sn-p：

// Custom State to manage disabling of panelContent
const [disablePanelContent, setDisablePanelContent] = useState(true);

// queryResponse is data being put into the DataGrid; '[0]' being the first row returned
// columnToTrigger is the column from the queryResponse that I want to trigger either showing or disabling the panelContent
if (!!queryResponse[0].columnToTrigger {
    setDisablePanelContent(false);
  } else {
    setDisablePanelContent(true);
  }

<  DataGridPro
// ...
getDetailPanelContent = {!!disablePanelContent ? null : getDetailPanelContent} // Answer
// ... 
/>

【讨论】：

【解决方案2】：

以下解决方案对我来说无法有条件地呈现主要细节的展开图标，因此我想分享我的工作解决方案：

// MUI: Always memoize the function provided to getDetailPanelContent and getDetailPanelHeight.
 const getDetailPanelContent = useCallback((params: GridRowParams<any>) => <CustomDetailPanel params={params} rowExpansion={rowExpansion}/>, []);

// Inside of the datagrid - conditionally render based on rowExpansion
{...(_.isEmpty(rowExpansion) ? {} : { getDetailPanelContent:getDetailPanelContent })}

【讨论】：