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

Question

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

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

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

Answer 1

我通过反复试验找到解决方案让自己感到惊讶。基本上我使用 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);
    ....

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

Is it possible to allow only one expanded row in a datagrid?

react-admin