【React工作记录五十八】函数方式渲染页面

 

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

项目中添加按钮的两种方式

编辑

核心实现代码

第一部分

getButtonList(status, funs)

调用 传入两个参数 第一个参数用鱼switch判断 第二参数继续调用方法

第二部分

const funs = {
      showModal: this.showModal,
      handleBySigning: this.handleBySigning,
      handleSpecialReleaseApply: this.handleSpecialReleaseApply,
      handleTransferApply: this.handleTransferApply,
      ownerChange: this.ownerChange,
    };

第三部分

export const getButtonList = (status, funs) => {
  switch (status) {
    // case PARTNERS_DRAFT_STATUS: //草稿
    //   return [checkBtn(funs)];
    // case PARTNERS_CHECKING_STATUS: //审核中
    //   return [checkBtn(funs), bySign(funs)];
    // case PARTNERS_TOBECHECK_STATUS: //待审核
    //   return [checkBtn(funs), downContract(funs)];
    case PARTNERS_TOBESIGN_STATUS: //待签约
      return [
    
        // specialRelease(funs),
       
      ];
    // case PARTNERS_FAILED_STATUS: //审核不通过
    //   return [checkBtn(funs)];
    case PARTNERS_CNECELED_STATUS: //取消
      return [marking(funs), recoverQualification(funs), exportData(funs)];
    case PARTNERS_FREEZEING_STATUS: //冻结
      return [exportData(funs), marking(funs), unFreeze(funs), disQualification(funs)];
    case PARTNERS_SPECIALRELEASE_STATUS: //
      return [
        exportData(funs),
        marking(funs),
        freeze(funs),
        disQualification(funs),
        distributeCustomer(funs),
        // bySign(funs),
      ];
    case PARTNERS_EFFECTIVE_STATUS: //合作中
      return [
     
        // ownerChange(funs),
   
        exportData(funs),
   
        marking(funs),
 
        distributeCustomer(funs),

        freeze(funs),
    
        disQualification(funs),
 
        // qualifiedTransfer(funs),
        // exportData(funs),
      ];

    default:
      return [
        exportData(funs),
        marking(funs),
        // ownerChange(funs),
        // distributeCustomer(funs),
        // freeze(funs),
        // disQualification(funs),
      ];
    // qualifiedTransfer(funs),
    //  bySign(funs),];
  }
};

第四部分

const recoverQualification = (funs) => {
  return {
    title: '恢复资格',
    buttonKey: 'H501000000013',
    onClick: () => {
      funs.showModal('recover');
    },
  };
};

第五部分

//显示模态框
  showModal = (type) => {
    if (!this.props.agent.selectedRows.length) {
      message.info('请选择要操作的数据！');
      return;
    }
    this[`${type}Modal`].showModal();
  };

第六部分

<CheckModal ////审核弹窗
          onRef={(ref) => {
            this.checkModal = ref;
          }}
          remarkList={remarkList}
          handleReset={this.handleReset}
          dispatch={dispatch}
          id={activeParenter.id}
          code={activeParenter.code}
        />

总结

通过不同type显示不同弹框的开启 nice