前言


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


导语


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


#yyds干货盘点# 【React工作记录五十八】函数方式渲染页面_调用方法#yyds干货盘点# 【React工作记录五十八】函数方式渲染页面_调用方法_02编辑

核心实现代码

第一部分

getButtonList(status, funs)

#yyds干货盘点# 【React工作记录五十八】函数方式渲染页面_数据_03


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


第二部分

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

#yyds干货盘点# 【React工作记录五十八】函数方式渲染页面_数据_04

第三部分

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),];
}
};

#yyds干货盘点# 【React工作记录五十八】函数方式渲染页面_调用方法_05

第四部分

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

#yyds干货盘点# 【React工作记录五十八】函数方式渲染页面_调用方法_06

第五部分

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

#yyds干货盘点# 【React工作记录五十八】函数方式渲染页面_h5_07

第六部分

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

#yyds干货盘点# 【React工作记录五十八】函数方式渲染页面_调用方法_08

总结


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