Ant Design Pro 从零到一 (总结)

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

  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    171 引用 • 267 回帖 • 552 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 6 关注

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...