Ant Design Pro 从零到一 (总结)

2021-05-26

ES6语法

要好好学习一下ES6语法的,建议看看

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 从零到一 (总结)


标题:Ant Design Pro 从零到一 (总结)
作者:sirwsl
地址:https://www.wslhome.top/articles/2021/05/25/1621922620162.html