是否可以在数据网格中只允许一个展开的行？

问题描述

我想一次只允许我的用户展开一行。使用默认的 Datagrid，您可以根据需要扩展任意数量的行，增加垂直空间，同时增加屏幕上显示的数据量。

假设没有默认设置（我还没有找到），我认为实现这一点的唯一方法是手动调整 Redux 存储中的状态。我可以在这里看到 redux 存储中的状态：

我在 Redux 方面非常薄弱，我不确定确保“扩展”数组中只有一个值的最佳方法。有没有人有任何想法让我尝试？提前致谢！

解决方法

我通过反复试验找到解决方案的方式让自己感到惊讶。基本上我使用 useSelector 来获取我的列表中展开的内容的状态，然后设置一个效果来观察该数组何时发生变化。如果数组大于一个，我只需使用 useDispatch 切换数组中的第一项。

代码片段：

    const expanded  = useSelector(state => 
        state.admin.resources.PackageInfo.list.expanded
    );

    const dispatch = useDispatch();

    useEffect(() => {
      if(expanded.length > 1) 
        dispatch(toggleListItemExpand('PackageInfo',expanded[0]));
    },[expanded]);

我很想得到关于此的任何反馈，我不确定定制发货到商店的副作用或后果是什么。我想明天我会试着把它扩展成一个可重用的钩子，我可以在我的所有列表中使用它。

编辑：

我确实把它移到了一个钩子里，现在让它在多个列表中工作。这是完整的钩子：

    import { useEffect } from "react";
    import { useSelector,useDispatch } from "react-redux";
    import { toggleListItemExpand } from "react-admin";
        
    const useExpandOnlyOne = (resource) => {
      const expanded = useSelector(
        (state) => state.admin.resources[resource].list.expanded
      );
      const dispatch = useDispatch();
    
      useEffect(() => {
        if (expanded.length > 1)
          dispatch(toggleListItemExpand(resource,expanded[0]));
      },[expanded]);
    };
    
    export default useExpandOnlyOne;

我只是在我的顶级列表中像这样调用它：

    const PackageList = (props) => {
        useExpandOnlyOne(props.resource);
    ....