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={
		'100%',
		marginTop:30,
		marginLeft:'auto',
		marginRight:'auto',
	}
	const divStyle={
		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={
			'100%',
			marginTop:30,
			marginLeft:'auto',
			marginRight:'auto',
		}
		const divStyle={
			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/... 查找需要的路径

----未完待续---