ant design中ES6寫法個人總結

ant design已經有很多人在使用了，漂亮的風格和元件，吸引了不少開發者

下面主要記錄一下元件的寫法

ant design:

es6 module:

學習ant design的時候，沒有熟悉過任何es、react、ts語法等，按照：ant design官網專案實戰： 寫乙個demo嘗試玩玩，是非常不錯的選擇。

ant design官網專案實戰中的元件(component)頁面：  我複製的。

import react,  from 'react';

import from 'antd';
const productlist = () => , >
delete
);},
}];return (
);};productlist.proptypes = ;
export default productlist;

這就是es6啦，而專案實戰的寫法裡面是不支援this的，並且state是在model中定義的，通過路由傳遞到我們的元件中

元件大概這樣寫的：我改了下面的，**非常難看，能明白就好

import react from 'react';

import from 'antd';
const buttontest = () => ;
function onclicktext() )
this.state.testfun('12');
} const buttonsize = size;
width:'100%',
margintop:30,
marginleft:'auto',
marginright:'auto',
} const divstyle=
return(
向左 
向右 )}
export default buttontest;

下面這個例子：copy自ant design官網，並刪除了很多別的樣式按鈕，官網這裡用的es6寫法，

import react from 'react';

import from 'antd';
class buttontest extends react.component 
onclicktext() )
//點選按鈕後呼叫通過props拿到的外部方法
this.state.testfun('12');
} render() 
const divstyle=
return(
向左 
向右 
) }}export default buttontest;

路由傳遞給我們的變數非常直觀，可以直接呼叫方法，也可以寫方法去呼叫引用進來的方法

自己寫方法需要在裡面新增上function或則const：

funtion fu()

2. class buttontest extends react.component

constructor(props) );

呼叫外部方法：

this.state.testfun('12');

render()

都是需要export default 類名;

其他方法：

路徑查詢：

http://localhost:8989/ 是npm開啟的路徑

http://localhost:8989/src/utils/... 查詢需要的路徑

----未完待續---

es6函式寫法

1 普通函式的定義，用箭頭函式表示，demofunction是函式名，括號表示引數，大括號表示函式體的內容。12 3let demofunc param 2 map函式在es6中的寫法，同樣也是箭頭函式，e表示map出來的元素，key表示當前id12 3array.map e,key 3 類內函式的...

ES6中的類 Class 的寫法

1.傳統es5中的class用法 es5的對應寫法 function 定義原型方法 user.prototype.show function 定義靜態方法 user.run function window.user user 1.es6中的class用法 class user 原型方法 show 靜...

ES6陣列去重新寫法

es6裡新新增了兩個很好用的東西，set和array.from。set是一種新的資料結構，它可以接收乙個陣列或者是類陣列物件，自動去重其中的重複專案。但是set去重後，返回的是乙個物件，這時候，就要用到array.from，把類陣列物件 可迭代物件轉化為陣列。let arr 2,3,1,4,3,7 ...