2019-10-09（总结）Ant-design-pro开发常用模式

onRef父子组件关联

• 子组件调用父组件的方法

子组件：
清空内容
父组件：

注意：父组件传递的函数名和子组件通过this.props接收的函数名称需要一直

• 父组件调用子组件方法 -onRef
  过程：1、在组件内部定义onRef方法，接收ref，方法内部将ref绑定到this.child上；2、在子组件上以onRef函数名向子组件传递onRef方法 3、父组件内部定义需要调用的子组件中介方法clearChildValue，在其内部调用this.child上传递过来的方法
  
  

  父组件：
  
  子组件上先在componentDidMount上处理父组件传递过来的onRef方法this.props.onRef(this)将自身的this传递过去，this对应父组件onRef方法是ref形参，完成这个动作相当于把子组件的this通过onRef函数传递给了父组件的this.child，此时，子组件上所有传递给父组件的方法deleteValue不需要暴露，可直接在父组件上通过this.child进行调用
  
  

  子组件

注意，如果有多个子组件：

child是自己随便写的 多个子组件你可以
onRef = (ref) => {
this.child = ref;
}
onRefDate = (ref) => {
this.childDate = ref;
}

工作中遇到的案例：

  /**
   * 关联更新子组件
   */
  updateRef = (ref) =>{
    this.updateChild = ref;
  }

参考文档：https://www.jianshu.com/p/ff1420118918

---

删除方法加入confirm处理

import { Modal } from 'antd'
const { confirm } = Modal;

删除方法中使用：
    confirm({
      title: '确定要删除课件?',
      okText: '确定',
      cancelText: '取消',
      // 点击确定之后的处理逻辑
      onOk:()=>{
        console.log(formValues)
        // 处理只剩下一个值的情况---> 如果第二页请求数据唯一一个值被删除则发起请求跳转到第二页中
        if(coursewareObj.records.length === 1 && formValues.current !== undefined && formValues.current !== 1){
          values.current -= 1;
          this.setState({
            formValues: { ...values },
          })
        }
        dispatch({
          type: 'courseware/deleteCourseware',
          payload: coursewareId,
          // callback: () => {
          //   // 单个删除的回调函数是否需要清空选中行？----不可以也不需要
          // 单个删除之后是否需要从选中行中删除掉已经删除的行Key值--->不删除的情况下也不影响后续请求
          //   this.setState({
          //     selectedRows: [],
          //   });
          // },
        }).then(() => {
          dispatch({
            type: 'courseware/fetch',
            // 将此时查询表格中的参数带过去一同请求
            payload: { ...values }, // 直接使用formValues属性扩散之后在对象内传过去即可，不需要另外赋值
            // payload:{...formValues}
          });
        });
      },
      // 点击取消之后的处理逻辑
      onCancel() {},
    });

---

列表标签上的render值处理

{
      title: '资讯类别',
      dataIndex: 'cateType',
      className: styles.centerAlign,
      render: val => val === 0
          ? '监管动态'
          : val === 1
            ? '政策法规'
            : val === 2
              ? '曝光辟谣'
              : val === 3
                ? '抽检公告'
                : val === 4
                  ? '行业动态'
                  : val === 5
                    ? '食品专题'
                    : val === 6
                      ? '餐饮专题'
                      : val === 7
                        ? '饮食养生'
                        : '-',
    },

和：

    {
      title: '资讯状态',
      dataIndex: 'infoStatus',
      className: styles.centerAlign,
      render: val => val === 0 ? (
        已发布
        ) : val === 1 ? (
          待发布
        ) : (
          '-'
        ),
    },

还有：

 {
      title: '操作',
      dataIndex: 'action',
      className: styles.centerAlign,
      render: (text, record) =>
        record.infoStatus === 0 ? (
          
            发布
            
             this.handleRecall(record.infoId)}>撤回
            
             this.handleDelete(record.infoId)}>删除
            
             this.handleUpdate(record.infoId)}>编辑
          
        ) : (
          
             this.handlePush(record.infoId)}>发布
            
            撤回
            
             this.handleDelete(record.infoId)}>删除
            
             this.handleUpdate(record.infoId)}>编辑
          
        ),
    },

---

组件之间隐藏显示的逻辑处理

    return (
      
        {create === false &&
          modalVisibleNewsInfo === false &&
          update === false? (
            
            。。。省略主页面组件书写
            
        ) : create === true ? (
          
            {create && }
          
        ) : update === true ? (
          
            {update &&  }
          
        ):(
          
            {modalVisibleNewsInfo && (
              
            )}
          
        )}
      
    );