练习八、使用react的ant-design创建一个功能模块，支持数据管理页面

1.1 功能描述

使用react创建一个功能模块，支持数据管理（查询表单 + 新增、导入、导出按钮 + 包含编辑的按钮，分页的列表）

2.1 主要考点

2.1.1 运用组件

• 熟悉react的ant-design-pro：官方文档 Ant Design 5.0
• 对比基于react的ant-design与vue的element-ui之间搭建相同的数据管理之间的不同。

2.2.1 基本思路

• 使用react创建一个功能模块，支持数据管理（查询表单 + 新增、导入、导出按钮 + 包含编辑的按钮，分页的列表）

3.1 踩到的坑

• 问题1：react如何给html标签写样式？
• 回答1：在html上可以创建className，使用className={ 类名A }。然后在style.less中类名A写入相关样式，在index.tsx中引入改样式文件。
  ———————————
• 问题2：react中怎么在html上的className设置多个类？
• 回答2：在className的{ }中，可以使用{ 类名A + ’ ’ + 类名B }进行字符串的拼接来引入多个类的样式。经过网上查到，也可以使用一些依赖包等来解决此问题。
  ———————————
• 问题3：ant框架中的TextArea怎么使用？
• 回答3：在通常中可以使用在里面设置type=textArea，但发现页面的输入框还是保持一行，没有展示出多行，解决方案：使用<input.TextArea>来解决此问题，引入input类中的TextArea。

4.1 相应框架或语言

• 语言：ts,css
• 框架：ant-design-pro,react

5.1 相关代码

index.tsx

import React, {
   
    
     PureComponent, Component } from 'react';
import {
   
    
     Button, Drawer, Input, message, Flex, Form, Card, Table, Space, Tag, Pagination, Popover, Popconfirm, Modal, Select, TreeSelect, Cascader, DatePicker, RangePicker, InputNumber, Switch, Upload, Slider, ColorPicker, PlusOutlined, Radio } from 'antd';
import {
   
    
     UploadOutlined } from '@ant-design/icons';
import styles from '../styles.less'
import {
   
    
     tableList } from '@/services/ant-design-pro/api';
import {
   
    
     DeleteTwoTone } from '@ant-design/icons';
// import type { ColumnsType } from 'antd/es/table';

class CompareComponent extends PureComponent {
   
    
    
    state = {
   
    
    
        tableHeight: 0,
        loading: false,
        data: [],
        pageParams: {
   
    
    
            pageSize: 10,
            page: 1,
            total: 0
        },
        showTotal: 0,
        isShow: false,
        bsShowSettingWin: false,
        bsShowUpLoadWin: false,
        props: {
   
    
    
            name: 'file',
            action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188',
            headers: {
   
    
    
                authorization: 'authorization-text',
            },
        },
        column: [
            {
   
    
    
                title: 'Name',
                dataIndex: 'name',
                key: 'name',
                width: 200,
                render: (text: String) => <a>{
   
    
    text}</a>,
            },
            {
   
    
    
                title: 'Age',
                dataIndex: 'age',
                width: 200,
                key: 'age',
            },
            {
   
    
    
                title: 'Address',
                dataIndex: 'address',
                width: 200,
                key: 'address',
            },
            {
   
    
    
                title: 'Tags',
                key: 'tags',
                width: 200,
                dataIndex: 'tags',
                render: (_, {
   
    
     tags }) => (
                    <>
                        {
   
    
    tags.map((tag) => {
   
    
    
                            let color = tag.length > 5 ? 'geekblue' : 'green';
                            if (tag === 'loser') {
   
    
    
                                color = 'volcano';
                            }
                            return (
                                <Tag color={
   
    
    color} key={
   
    
    tag}>
                                    {
   
    
    tag.toUpperCase()}
                                </Tag>
                            );
                        })}
                    </>
                ),
            },
            {
   
    
    
                title: 'Action',
                key: 'action',
                width: 150,
                fixed: 'right',
                align: 'center',
                editable: true,
                render: (_, record: {
   
    
     key: React.Key }) =>
                    this.state.data.length >= 1 ? (
                        <div>
                            <Button size='small' type="link" onClick={
   
    
    () => this.toOpenWin(record)}