Ant Design Pro 从零到一 （总结）

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

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

相关链接

上一篇：👀

Ant Design Pro 从零到一（学习 Model）

Ant Design Pro 系列：👀

Ant Design Pro 从零到一教程

React 从零到一 Demo 演练（上）

React 从零到一 Demo 演练（下）

Ant Design Pro 从零到一（认识 AntD）

Ant Design Pro 从零到一（页面创建）

Ant Design Pro 从零到一（Mock 使用）

Ant Design Pro 从零到一（学习 Model）

Ant Design Pro 从零到一 （总结）