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
加油吧孩子,只能救你到这里了 😂
相关链接
上一篇:👀
Ant Design Pro 系列:👀
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于