React中如何生成可共享的动态列数组

React 允许创建自定义Hook来复用包含内置Hook的逻辑，自定义Hook仅要求命名以use开头，可返回任意类型的值（包括你需要的列数组），完全满足你的需求。

封装后的代码 #

新建文件比如useActivityTableColumns.ts，写入以下内容：

import { useContext, useCallback } from 'react';
import CategoryDropdown from '../common/CategoryDropdown';
// 替换为你实际的上下文导入路径
import { Activities } from '@/contexts/Activities';

const useActivityTableColumns = () => {
  const {
    data: [data, setData],
    categories: [categories, setCategories]
  } = useContext(Activities);

  // 用useCallback包裹事件处理函数，避免不必要的组件重渲染
  const handleCategoryChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      // 保留你原有的事件处理逻辑
    },
    [setData, setCategories]
  );
 
  if (!(data && categories)) return [];

  return [
    {
      field: 'name',
      fieldName: 'Name',
      headerName: `Name`,
      type: 'string',
      template: (dataItem) => {
        const { name } = dataItem;
        return name;
      }
    },
    {
      field: 'categoryId',
      fieldName: 'Category',
      headerName: 'Category',
      type: 'string',
      template: (dataItem) => {
        const { categoryId } = dataItem;
        return (
          <CategoryDropdown
            categoryId={categoryId}
            onChange={handleCategoryChange}
          />
        );
      }
    }
  ];
};

export default useActivityTableColumns;

使用方式 #

在任意需要该列配置的表格组件中，直接在组件顶层调用该Hook即可拿到列数组：

import useActivityTableColumns from '@/hooks/useActivityTableColumns';

const BusinessTable = () => {
  const tableColumns = useActivityTableColumns();
  // 直接将列数组传给表格组件即可
  return <BaseTable columns={tableColumns} /* 其他表格属性 */ />
};

扩展说明 #

如果不同表格需要定制部分列配置，可以给自定义Hook增加入参，比如传入额外列配置、是否隐藏某列的标识，返回合并后的数组即可实现灵活复用。

内容的提问来源于stack exchange，提问作者D. Messier