用 React 复刻 Ant Design Table 组件：一步步打造一个强大表格

2023-09-22 08:49:38

用 React 复刻 Ant Design Table 组件：一步步打造一个强大表格

在 React 应用中，表格组件至关重要，它们允许我们以结构化和可视化的方式展示数据。Ant Design 提供了一个出色的 Table 组件，它功能丰富，易于使用。本教程将指导你如何利用 React 的强大功能，从头开始构建一个类似于 Ant Design Table 组件的表格，让你可以定制和扩展表格以满足你的特定需求。

步骤 1：创建 React 项目

首先，创建一个新的 React 项目：

npx create-react-app react-table

步骤 2：安装依赖项

安装必要的依赖项：

npm install antd

步骤 3：创建表格组件

在 src 文件夹中，创建一个名为 Table.js 的文件，并添加以下代码：

import React, { useState } from "react";
import { Table, Button } from "antd";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
  },
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
];

const TableComponent = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const onSelectChange = (selectedRowKeys) => {
    setSelectedRowKeys(selectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  return (
    <>
      <Button type="primary" onClick={() => {}}>
        添加
      </Button>
      <Button type="primary" onClick={() => {}}>
        删除
      </Button>
      <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
    </>
  );
};

export default TableComponent;

步骤 4：在 App.js 中使用表格组件

在 App.js 文件中，导入并使用表格组件：

import React from "react";
import TableComponent from "./Table";

const App = () => {
  return (
    <div className="App">
      <TableComponent />
    </div>
  );
};

export default App;