REACT ANT DESIGN 结合使用：入门指南

2023-11-26 08:33:11

React Ant Design：构建优雅且高效的用户界面

引言

作为一名React开发者，拥有功能强大且易于使用的组件库至关重要，而React Ant Design正符合这一需求。它是一套令人印象深刻的组件，旨在帮助你快速轻松地构建令人惊叹的用户界面。让我们深入了解React Ant Design，探索它提供的强大功能。

入门：安装和配置

安装

通过以下命令安装React Ant Design：

npm install antd

配置

安装完成后，在你的React项目中导入所需组件：

import { Component } from 'antd';

组件概述

React Ant Design提供了一系列组件，涵盖了广泛的用例，包括：

数据展示： 表格、树状结构、分页器
表单和输入： 输入框、下拉菜单、日期选择器
导航： 菜单、分页器、面包屑
布局： 布局、行、列

构建管理系统

为了展示React Ant Design的强大功能，让我们创建一个基本的管理系统：

表格

显示数据的一个表格：

import { Table } from 'antd';

const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id' },
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
];

const data = [
  { id: 1, name: 'John Doe', age: 30 },
  { id: 2, name: 'Jane Smith', age: 25 },
  { id: 3, name: 'Michael Jones', age: 28 },
];

const TableDemo = () => {
  return (
    <Table
      columns={columns}
      dataSource={data}
      pagination={false}
    />
  );
};

表单

输入数据的表单：

import { Form, Input, Button } from 'antd';

const FormDemo = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form
      form={form}
      onFinish={onFinish}
    >
      <Form.Item
        label="Name"
        name="name"
        rules={[{ required: true, message: 'Please input your name!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Age"
        name="age"
        rules={[{ required: true, message: 'Please input your age!' }]}
      >
        <InputNumber />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

导航栏

在不同页面之间导航的导航栏：

import { Menu } from 'antd';
import { Link } from 'react-router-dom';

const NavDemo = () => {
  return (
    <Menu mode="horizontal">
      <Menu.Item key="home">
        <Link to="/">Home</Link>
      </Menu.Item>

      <Menu.Item key="users">
        <Link to="/users">Users</Link>
      </Menu.Item>
    </Menu>
  );
};