reactjs - react 管理员数据网格 : expand all rows by default

Question

我有一个 react 管理员 (3.14.1) List使用 Datagrid ，其中每一行都是可扩展的。
有谁知道怎么做默认展开所有行 ?
或者以编程方式扩展一行？
我已经检查了 node_modules/ra-ui-materialui/lib/list/datagrid/Datagrid.js 中的 Datagrid 代码，没有明显的 Prop ...

Datagrid.propTypes = {
    basePath: prop_types_1.default.string,
    body: prop_types_1.default.element,
    children: prop_types_1.default.node.isRequired,
    classes: prop_types_1.default.object,
    className: prop_types_1.default.string,
    currentSort: prop_types_1.default.shape({
        field: prop_types_1.default.string,
        order: prop_types_1.default.string,
    }),
    data: prop_types_1.default.any,
    // @ts-ignore
    expand: prop_types_1.default.oneOfType([prop_types_1.default.element, prop_types_1.default.elementType]),
    hasBulkActions: prop_types_1.default.bool,
    hover: prop_types_1.default.bool,
    ids: prop_types_1.default.arrayOf(prop_types_1.default.any),
    loading: prop_types_1.default.bool,
    onSelect: prop_types_1.default.func,
    onToggleItem: prop_types_1.default.func,
    resource: prop_types_1.default.string,
    rowClick: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.func]),
    rowStyle: prop_types_1.default.func,
    selectedIds: prop_types_1.default.arrayOf(prop_types_1.default.any),
    setSort: prop_types_1.default.func,
    total: prop_types_1.default.number,
    version: prop_types_1.default.number,
    isRowSelectable: prop_types_1.default.func,
    isRowExpandable: prop_types_1.default.func,
};

Answer 1

我有一个解决方案可以做类似的事情，而不是使用 jquery。这是一个自定义钩子(Hook)，它使资源的第一个 id 展开，在我的例子中是列表中的第一项。

// useExpandFirst.ts

import * as React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Identifier, ReduxState, toggleListItemExpand } from 'react-admin';

type AboutExpansion = { noneExpanded: boolean; firstId: Identifier };

const useExpandFirst = (props) => {
  const { resource } = props;
  const once = React.useRef(false);

  const dispatch = useDispatch();
  const { noneExpanded, firstId } = useSelector<ReduxState, AboutExpansion>((state) => {
    const list = state?.admin?.resources?.[resource]?.list;

    return {
      noneExpanded: list?.expanded?.length === 0,
      firstId: list?.ids[0],
    };
  });

  React.useEffect(() => {
    if (noneExpanded && firstId && !once.current) {
      once.current = true;
      const action = toggleListItemExpand(resource, firstId);
      dispatch(action);
    }
  }, [noneExpanded, firstId, dispatch, resource]);
};

我没有在实际呈现列表的组件中使用钩子(Hook)，而是在其他一些(并非如此)随机组件中使用它，例如应用程序的布局。这会导致呈现 List 的组件的重新呈现方式更少。

// MyLayout.tsx

const MyLayout: React.FC<LayoutProps> = (props) => {
  // expand the first company record as soon as it becomes available
  useExpandFirst({ resource: 'companies' });

  return (
    <Layout
      {...props}
      appBar={MyAppBar}
      sidebar={MySidebar}
      menu={MyMenu}
      // notification={MyNotification}
    />
  );
};

它并不完美，但它可以完成工作。只需进行一些修改，您就可以更改它以扩展所有 id。这意味着您必须为每个 id 分派(dispatch)操作(在 useEffect 钩子(Hook)函数中)。