ant design中ES6寫法個人總結

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

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

ant design:https://ant.design/docs/react/introduce-cn

es6 Module:http://es6.ruanyifeng.com/#docs/module

學習ant design的時候，沒有熟悉過任何es、react、ts語法等，按照：ant design官網項目實戰：https://ant.design/docs/react/practical-projects-cn 寫一個demo嘗試玩玩，是非常不錯的選擇。

ant design官網項目實戰中的組件(Component)頁面：  我復制的。

import React, { PropTypes } from 'react';
import { Table, Popconfirm, Button } from 'antd';

const ProductList = ({ onDelete, products }) => {
  const columns = [{
    title: 'Name',
    dataIndex: 'name',
  }, {
    title: 'Actions',
    render: (text, record) => {
      return (
        <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
          <Button>Delete</Button>
        </Popconfirm>
      );
    },
  }];
  return (
    <Table
      dataSource={products}
      columns={columns}
    />
  );
};

ProductList.propTypes = {
  onDelete: PropTypes.func.isRequired,
  products: PropTypes.array.isRequired,
};

export default ProductList;

寫完后發現好像還是蠻簡單的，和我們以前的寫法很相似，至少流程很清晰，就准備愉快的開啟啦！

例如我們找到第一個Button組件，打開代碼一看，寫的好像...和咱的是兩回事呀

 

 這就是es6啦，而項目實戰的寫法里面是不支持this的，並且state是在model中定義的，通過路由傳遞到我們的組件中

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

import React from 'react';
import { Button, Radio, Icon } from 'antd';

const ButtonTest = ({
	size,
	testFun,
	changeSize,
}) => {
	state = {
	    size: 'default',
	};

	function onClickText() {
		console.log('你點擊我啦')
		// 修改state的值
		changeSize({size:size=='small'?'large':'small'})
		this.state.testFun('12');
	}
	const buttonSize = size;
	const wrapperStyle={
		width:'100%',
		marginTop:30,
		marginLeft:'auto',
		marginRight:'auto',
	}
	const divStyle={
		width:300,
		marginTop:30,
		marginLeft:'auto',
		marginRight:'auto',
	}
	return(
		<div style={wrapperStyle}>
			<div style={divStyle}>
				<h2>ECMAScript 6</h2>
				<Button.Group size={buttonSize}>
		          <Button onClick={this.onClickText} type="primary">
		            <Icon type="left" />向左
		          </Button>
		          <Button onClick={this.onClickText} type="primary">
		            向右<Icon type="right" />
		          </Button>
		        </Button.Group>
			</div>
		</div>
	)
}
export default ButtonTest;

　　

es6的寫法：

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

import React from 'react';
import { Button, Radio, Icon } from 'antd';

class ButtonTest extends React.Component {
	constructor(props) {
		super(props);
		// 這里的props可以獲取到外部傳遞進來的值(包含變量、方法等等)
		console.log(props)
		this.state = this.props
		this.onClickText = this.onClickText.bind(this);
	}

	onClickText() {
		console.log('你點擊我啦',this.state.size)
		// 修改state的值是this.setState()
		this.setState({size:this.state.size=='small'?'large':'small'})
                //點擊按鈕后調用通過props拿到的外部方法
		this.state.testFun('12');
	}

	render() { 
		// 這里定義我們常用的方法
		const size = this.state.size;
		const wrapperStyle={
			width:'100%',
			marginTop:30,
			marginLeft:'auto',
			marginRight:'auto',
		}
		const divStyle={
			width:300,
			marginTop:30,
			marginLeft:'auto',
			marginRight:'auto',
		}

		return(
			<div style={wrapperStyle}>
				<div style={divStyle}>
					<h2>ECMAScript 6</h2>
					<Button.Group size={size}>
			          <Button onClick={this.onClickText} type="primary">
			            <Icon type="left" />向左
			          </Button>
			          <Button onClick={this.onClickText} type="primary">
			            向右<Icon type="right" />
			          </Button>
			        </Button.Group>
				</div>
			</div>
		)

	}
}
export default ButtonTest;

　　

　 總結：

 1.  const testDemo=({對象A，數組C，方法B...})=>{...}

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

自己寫方法需要在里面添加上function或則const：

funtion fu(){ ...,方法B(); }

2. class ButtonTest extends React.Component {

　　    state  = {}

         constructor(props) {//構造器

　　　　super(props);

　　　　this.state = this.props

　　      props中獲取到外部路由的值：對象A，數組C，方法B...，送給state。

           this.fu = this.fu.bind(this);

        }

      fu(){

　　　　修改state的值是:

　　　　　　this.setState({size:'small'});

　　　　調用外部方法：

　　　　　　this.state.testFun('12');

　　}

　　render() {return()}

｝

都是需要export default 類名;

 

其他方法：

路徑查找：

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

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

----未完待續---