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/... 查找需要的路径
----未完待续---
转载于:https://www.cnblogs.com/mabylove/p/6709178.html
