Material-UI Data-Grid：如何将参数传递给自定义工具栏？

Question

我在数据网格（Material-UI）中定义自定义工具栏（请参阅：https: //material-ui.com/components/data-grid/rendering/#toolbar）我从这个示例开始：https://codesandbox。 io/s/x58yv?file=/demo.js

我想通过过渡显示或隐藏工具栏。因为我们无法将自定义道具传递给组件：

   <DataGrid
    ...
    components={{ Toolbar: CustomToolbar }}
    ...
   </DataGrid>

所以我使用了这样的上下文 API：

   export function CustomToolbar(props: GridBaseComponentProps) {
    const classes = useToolbarStyles();
    const toolbarContext = useContext(ToolbarContext);
    return (
        <Collapse in={toolbarContext.toolbar}>
            <GridToolbarContainer className={classes.root}>
                <GridColumnsToolbarButton />
                <GridFilterToolbarButton />
                <GridDensitySelector />
                <GridToolbarExport />
            </GridToolbarContainer>
        </Collapse>
    );
   }

它有效，但有更好的解决方案吗？

Answer 1

您应该能够使用componentsPropsDataGrid 的属性来传递任何其他属性（请参阅https://material-ui.com/api/data-grid/），例如。

<DataGrid
    ...
    components={{ Toolbar: CustomToolbar }}
    componentsProps={{ toolbar: { myCustomProp: 8 } }}
    ...
</DataGrid>