zoukankan      html  css  js  c++  java
  • 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/... 查找需要的路径

    ----未完待续---

  • 相关阅读:
    pandas基础操作(一)
    将字符串中的字符映射不同的值,并保存txt文本
    and、or、not、in、not in 中的or
    pandas读写数据库
    SQL语句被锁,运行超时
    在一张表里添加另外一张表里的一列数据
    Linux服务进程管理
    Ubuntu软件更新更换源
    SpringBoot1-1
    Linux 基本使用2
  • 原文地址:https://www.cnblogs.com/mabylove/p/6709178.html
Copyright © 2011-2022 走看看