项目总结-REACT-1

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

pathname:`跳转地址`，

query：{

携带的数据

}

}}>

 

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

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

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

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

5、页面刚一进入产生的逻辑可以放在生命周期函数中componentWillMount。Props 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.productId, time: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;
}