函数方式渲染页面

​

前言

我是歌谣 我有个兄弟 巅峰的时候排名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 PARTNERSDRAFTSTATUS: //草稿 // return [checkBtn(funs)]; // case PARTNERSCHECKINGSTATUS: //审核中 // return [checkBtn(funs), bySign(funs)]; // case PARTNERSTOBECHECKSTATUS: //待审核 // return [checkBtn(funs), downContract(funs)]; case PARTNERSTOBESIGNSTATUS: //待签约 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

​