ant design中ES6寫法我的總結

時間 2019-11-11

原文原文鏈接

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

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

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

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

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

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;

寫完後發現好像仍是蠻簡單的，和咱們之前的寫法很類似，至少流程很清晰，就準備愉快的開啓啦！antd

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

這就是es6啦，而項目實戰的寫法裏面是不支持this的，而且state是在model中定義的，經過路由傳遞到咱們的組件中學習

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

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);