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/... 查找需要的路径
----未完待续---
