当前位置：首页 > React

react实现自动crud

2026-01-26 22:40:16React

使用 React 实现自动 CRUD

基于 React Hook 和 API 封装

通过自定义 Hook 封装通用的 CRUD 操作逻辑，例如 useCrud。该 Hook 可接收 API 配置，返回状态和方法：

function useCrud(apiConfig) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  const fetchAll = async () => {
    setLoading(true);
    const res = await apiConfig.getAll();
    setData(res.data);
    setLoading(false);
  };

  const create = async (item) => {
    await apiConfig.create(item);
    await fetchAll();
  };

  // 类似实现 update 和 delete 方法
  return { data, loading, fetchAll, create };
}

通用表单组件

创建可复用的表单组件处理创建和更新操作，通过 Formik 或 React Hook Form 管理表单状态：

function CrudForm({ initialValues, onSubmit }) {
  const formik = useFormik({
    initialValues,
    onSubmit: (values) => onSubmit(values),
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input name="name" onChange={formik.handleChange} value={formik.values.name} />
      <button type="submit">Submit</button>
    </form>
  );
}

动态表格组件

使用 react-table 或自定义组件渲染数据表格，集成操作按钮：

react实现自动crud

function CrudTable({ data, onEdit, onDelete }) {
  const columns = [
    { Header: 'ID', accessor: 'id' },
    { Header: 'Name', accessor: 'name' },
    {
      Header: 'Actions',
      Cell: ({ row }) => (
        <>
          <button onClick={() => onEdit(row.original)}>Edit</button>
          <button onClick={() => onDelete(row.original.id)}>Delete</button>
        </>
      ),
    },
  ];

  return <Table columns={columns} data={data} />;
}

状态管理集成

将 CRUD 状态提升至上下文或全局状态管理（如 Redux），便于跨组件共享：

const CrudContext = createContext();

function CrudProvider({ children, apiConfig }) {
  const crudMethods = useCrud(apiConfig);
  return <CrudContext.Provider value={crudMethods}>{children}</CrudContext.Provider>;
}

代码生成工具辅助

对于高度重复的 CRUD 模块，可使用脚本或工具（如 Plop.js）自动生成组件模板：

react实现自动crud

module.exports = {
  description: 'Generate CRUD component',
  prompts: [
    {
      type: 'input',
      name: 'name',
      message: 'Enter model name (e.g. "Product"):',
    },
  ],
  actions: [
    {
      type: 'add',
      path: 'src/components/{{pascalCase name}}Form.js',
      templateFile: 'templates/FormComponent.hbs',
    },
  ],
};

后端 API 规范

确保后端接口遵循 RESTful 规范，例如：

GET /api/resources 获取列表
POST /api/resources 创建条目
PUT /api/resources/:id 更新条目
DELETE /api/resources/:id 删除条目

类型安全增强

使用 TypeScript 定义接口和数据类型，减少运行时错误：

interface User {
  id: number;
  name: string;
}

interface CrudApi<T> {
  getAll: () => Promise<T[]>;
  create: (item: Omit<T, 'id'>) => Promise<T>;
}