react前端之ant design开发笔记

1.es6中扩展运算符（...）：它用于把一个数组转化为用逗号分隔的参数序列，可以将数组或者对象里面的值展开。常用在不定参数个数时的函数调用、数组合并等情形

2.报错：Error: [app.model] namespace should be unique

解决：models的文件名和namespace要一样

3.Model下面，即使父级目录不唯一js文件命名也要要唯一

4.前端打包：npm run build

5.location.reload();//刷新当前页

6.pagination={false}是取消分页页码，pagination={null}:显示页码但是不起作用；model决定是否有callback回调；       rowSelection={null}是去掉分页列表勾选框

7.子组件向父组件传值：

（1）YearIndexInfoDetail是子组件，YearIndexInfo是父组件，在父组件中定义回传onUploadCallback：

            <YearIndexInfoDetail
              onUploadCallback={this.onUploadCallback}
            />

然后回调改变值：

  //回调改变值
  onUploadCallback = (info) => {
    //为indexName 添加一层，让他变成yearIndex.indexName 来解析JSON
    info.forEach((item) => { item.yearIndex = { indexName: item.indexName }; });
    this.setState({
      detailInfoData: info,//detailInfoData为数据集
    });
  }

（2）子组件中， 通过this.props接收父类传过来的onUploadCallback，并回调改变值：

  // 列表显示实体类
  handleUpload2 = () => {
    const { uploadRes } = this.state;
    this.props.onUploadCallback(uploadRes);//接收父类传过来的onUploadCallback，并回调改变值
    if (uploadRes) {
      const entitys = uploadRes.entity;
      this.props.detailInfoDataUpdate(entitys);
    }
  }

 

8.父组件向子组件传值：

（1）比如我要传一个点击某条记录的修改功能需要传该条记录的id:

  detailSearch = (type, id, viewType) => {
    if (viewType === 'update') {//修改的查询方法，根据id去查询，所以payload: id,
      this.props.dispatch({
        type: 'yearIndexModel/fetchDetailView',
        payload: id,
        //把该条记录id set进state里
        callback: (res) => {
          this.setState({
            detailInfoData: res,
            id,
          });
        },
      });
    } this.setState({
      manpowerDetailVisible: true,
      basicYearId: id,
      detailViewType: viewType,
    });
  }

（2）把id直接通过this.state.id扔给子组件

            <YearIndexInfoDetail
              configId={this.state.id}//把id直接扔给子组件YearIndexInfoDetail
              typeCode={this.props.typeCode}
              viewType={this.state.detailViewType}
              detailSearch={this.detailSearch}
              basicYearId={this.state.basicYearId}
            />

（3） 通过this.props.configId获取刚父组件传过来的id

  // 保存按钮操作
  saveButton = () => {
    let payloadBody = this.props.detailInfoData;
    const { form, dispatch } = this.props;
    //获取表单的输入值，比如这里是获取fieldsValue，然后拼接成postman测试的数据格式
    form.validateFields((err, fieldsValue) => {
      if (this.props.viewType === 'update') {
          const newData = {//拼装要插入的数据
          yearIndexValList: payloadBody,
          typeCode: this.props.typeCode,
          id: this.props.configId,  //这个id就是刚刚父组件传过来的，通过this.props获取
          ...fieldsValue,
        };
        this.props.dispatch({
          type: 'yearIndexModel/' + this.props.viewType,
          payload: newData,
          callback: (res) => {
            this.props.closeManpowerDetailModal(res.msg);
          },
        });
      }// 保存、关闭窗口，清空其他数据
      this.setState({ uploadEntitys: null, fileLists: [] });
    });
  }

9.回调时要先判断存不存在:if(res) :

  this.props.dispatch({
        type: 'yearIndexModel/getlockFlag',
        payload: newData1,
        callback: (res) => {
          if (res && res.code === '10001') {//判断res 存不存在，如果不存在会抛出系统异常
            const params = {
              typeCode_EQ: this.props.typeCode,
            };
            this.getTableData(params);
          } else if(res){
            message.err(res.msg);
          }
        },
      });

持续更新...