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