Ant Design Pro 从零到一（总结）

最新推荐文章于 2024-07-24 23:30:03 发布

sirwsl

最新推荐文章于 2024-07-24 23:30:03 发布

阅读量1.8k

点赞数 3

分类专栏： Ant Design Pro 文章标签： react reactjs typescript es6 less

本文链接：https://blog.csdn.net/qq_40432886/article/details/117294803

版权

Ant Design Pro 专栏收录该内容

8 篇文章 40 订阅

订阅专栏

ES6语法

要好好学习一下ES６语法的，建议看看

ES6 入门教程 - ECMAScript 6入门 (ruanyifeng.com)

1.1 ES6 教程 | 菜鸟教程 (runoob.com)

let 与 const

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

箭头函数

在项目中其实我更喜欢箭头函数

var f = v => v;
//等价于
var f = function(a){
 return a;
}
f(1);  //1

var f = (a,b) => {
 let result = a+b;
 return result;
}
f(6,2);  // 8

var button = document.getElementById('userClick');
button.addEventListener('click', () => {
     this.classList.toggle('on');
});

class Index extends React.Component{}
//我更喜欢下面的写法
const index:React.FC=()=>{}

关于state

因为用箭头函数，然后就出现了以下问题

在class Index extends React.Component{}中，存在constructor但是在箭头函数中没有，

同时reader()也改为直接return代替，在设置state也有一定区别，我们来看以下

基本写法：

import { Card,} from 'antd';
import React from "react";
import {PageContainer} from "@ant-design/pro-layout";
import {connect} from "umi";
import Search from "antd/es/input/Search";
import styles from "./index.less"

import { deleteById} from "@/pages/table/service";
import emitter from './ev'


class Index extends React.Component {
    private eventEmitter: any;

    //设置构造函数
    constructor(props) {
        super(props);
        this.state = {tableValue: this.props.tableValue};
        //将函数进行绑定，必须绑定
        this.DeleteById = this.DeleteById.bind(this);
    }

    //当props发生变化时执行，初始化render时不执行
    componentWillReceiveProps(props) {
   
    }


    getValue () {
   
    };

    //异步调用移除
    async DeleteById(key) {
   
    }


    render() {
       return ...
    }
}
//设置绑定的返回数据
const mapStateToProps = (state) => {
    return {
        tableValue: state.tableDemo.tableValue.data,
    }
}
//连接
export default connect(mapStateToProps)(Index);

用箭头函数

import {PageContainer} from "@ant-design/pro-layout";
import {Card, Checkbox, Col, Divider, Input, List, Row, Tabs, Tree, TreeSelect,Pagination } from "antd";
import React, {useEffect, useState} from "react";
import {
    ArrowDownOutlined,
    CloudDownloadOutlined, CloudFilled, HeartFilled,
    HeartOutlined
} from "@ant-design/icons";
import styles from './index.less'
import {getListValue, getTreeValue} from "@/pages/fix/service";
const { TabPane } = Tabs;
const { Search } = Input;

const Index:React.FC = ()=>{
    return <PageContainer>
	   <ListDetail />
     </PageContainer>;
}
const ListDetail:React.FC=()=>{
    const [data,setData] = useState([]);
    const [checkedList, setCheckedList] = React.useState([]);
    const [checkAll, setCheckAll] = React.useState(false);

    useEffect (async()=>{
            const result = await getListValue();
            setData(result.data);
        }
    )

    const onCheckAllChange = e => {
        setCheckAll(e.target.checked);
    };

    const onChange = list => {
        console.log(list)
    };

    return <>...</>
}
export default Index;

less文件

1、less文件中一般的写法与css基本一样，只是在tsx中使用时候是用className={}进行调用

2、由于我们使用AntD框架，所以会存在一些人家写好的样式，我们要修改这时候就需要用

**global关键字 **

eg：

:global{
  .ant-col-8 {
    display: block;
    /* flex: 0 0 33.33333333%; */
    max-width: 76.33333333%;
  }
}

组件之间通信

推荐阅读：React中组件通信的几种方式 - SegmentFault 思否

我们常常会涉及到组件之间的通信，例如父子组件之间的通信通过props或者ref，但是兄弟组件或者多级组件之间的通信我们就可以采用events

安装：

npm install events --save

项目地址

需要的自己download

AntD学习.zip

加油吧孩子，只能救你到这里了😂