• 项目总结-REACT-1


    1、实现页面跳转 <Link to ={ {

    pathname:`跳转地址`

    query{

    携带的数据

    }

    }}>

    2、DailyReportTable 中的onLoad 中的this.props.  

    没有值,或者不声明的时候 解构赋值出的变量是undefined

    3、Antd.Spin 标签中放置内容,显示的时候内容就会在加载中

    4、部分逻辑放在封装的组件当中,

    5、页面刚一进入产生的逻辑可以放在生命周期函数中componentWillMountProps change改变就用componentWillReceiveProps,State change 就用shouldComponentUpdate

    6

    Object.prototype.toString.call(data[datakey]) == [object Array]

     

    7、关于React,存在constructor 就必须加super  ,如果需要在constructor中使用this.props ,就写 super(props)

    8、如果需要在URL中拼数据传递参数 可以用this.props.location.query 进行获取

    9、判断是否按钮是否禁止: 写一个函数,把数据传入 ,在函数中进行判断,

      isDisable = (list) =>{

                for(let i = o; i<list.length ; i++){

                    if(list[i].length == 0){

                        return true

                    }else {

                        return false

                    }

                }

            }

            let disable = isDisable(list)

     

     

    10、浏览器的回退功能

    browserHistory.push({
         pathname: `/daily/profile`,
         query: {name: this.state.name, id: this.state.productIdtime:this.state.time}
    });

    使用browserHistory 这个需要在服务器进行一些配置

     

    11、实现表单控件提交

    fileChange = () => {
        let fileData = $("#file")[0].files[0];
        if(fileData){
            let file = new FormData();
            file.append('file', fileData);
            file.append('productId', this.state.productId);
            file.append('recordDay', this.state.time);
            this.setState({uploadLoading: true});
            let api = '/api/daily/report/import';
            $.ajax({
                type: 'post',
                url: api,
                data: file,
                processData: false,
                contentType: false,
                success: this.handleSuccess
            });
        }
    };

    点击input type = file 的时候 触发上面的事件,发送表单中的数据,实现文件的上传

    12、如果要实现Loading效果,就直接把spin 包裹loading的标签,然后用 spinning = true/false 进行判断加载还是不加载

    13、判断这个按钮出现还是不出现,可以在render return 之前把按钮的代码写在一个变量中,这个变量可以在判断条件下存取按钮代码,然后在return 中 {变量} 进行解构

    14、显示产品名字,超过9个字就显示。。。Tooltip 文字提示

    text 传入,text指的是产品名字

    render: (text) => {
        if(text.length > 10){
            return (
                <Tooltip title={text}>
                    <span>{text.slice(0,9) + '...'}</span>
                </Tooltip>
            );
        }
        return text;
    }

    用IE6的以后吃方便面都没有调料包!!!
  • 相关阅读:
    1-hadoop中遇到的各种异常
    13-hadoop-入门程序
    12-mapReduce的简介和yarn搭建
    11-hdfs-NameNode-HA-wtihQJM解决单点故障问题
    10-hdfs-hdfs搭建
    redis-java-api
    深度学习优化方法
    tf.nn.embedding_lookup()
    tf.variable_scope()和tf.name_scope()
    tf.Variable()、tf.get_variable()和tf.placeholder()
  • 原文地址:https://www.cnblogs.com/H5C3XXN/p/7119231.html
Copyright © 2020-2023  润新知