【React工作记录五十七】添加按钮的两种方式

简介: 【React工作记录五十七】添加按钮的两种方式

导语

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




编辑


方案1 if判断

const buttonTableList = [];
    if (status == '116237257909008888811254') {
      buttonTableList.push({
        title: '发布',
        type: 'primary',
        buttonKey: 'H701100000001',
        onClick: () => {
          this.publishPopup();
        },
      });
    }
    if (status == '116233111696128888077445') {
      buttonTableList.push({
        title: '关闭',
        type: 'primary',
        buttonKey: 'H701100000003',
        onClick: () => {
          this.closePopup();
        },
      });
    }
    buttonTableList.push(
      {
        title: '新增',
        type: 'primary',
        buttonKey: 'H701100000002',
        onClick: () => {
          openTab(this.props, `/management/frameList/add`);
        },
      }
      // {
      //   title: '发布',
      //   type: 'primary',
      //   onClick: () => {
      //     this.publishPopup();
      //   },
      // },
    );

方案2 switch

switch (row.status) {
            case PARTNERS_TOBESIGN_STATUS: //待签约1
              return [
                viewDetail,
                row.freezeStatus != '116291061459328888765442' &&
                row.canContract == '1596682955895718561276'
                  ? handleBySigning
                  : '',
                row.freezeStatus != '116291061459328888765442' ? ownerChange : '',
                row.freezeStatus != '116291061459328888765442' ? specialRelease : '',
              ];
            case PARTNERS_CNECELED_STATUS: //已取消
              return [viewDetail, row.freezeStatus != '116291061459328888765442' ? del : ''];
            case PARTNERS_EFFECTIVE_STATUS: //合作中
              return [
                viewDetail,
                row.freezeStatus != '116291061459328888765442' ? modify : '',
                row.freezeStatus != '116291061459328888765442' ? handleTransferApply : '',
                row.freezeStatus != '116291061459328888765442' ? ownerChange : '',
              ];
            case PARTNERS_FREEZEING_STATUS: //冻结中
              return [viewDetail];
            case PARTNERS_SPECIALRELEASE_STATUS: //特殊放行
              return [
                viewDetail,
                row.freezeStatus != '116291061459328888765442' ? handleBySigning : '',
              ];
            default:
              return [viewDetail];
          }

总结

两种方式 都是按照不同的判断生成对应的按钮 我是歌谣 微信公众号关注前端小歌谣

相关文章
|
2月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
54 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
2月前
|
缓存 前端开发 JavaScript
在react项目中实现按钮权限createContext && useContext
文章介绍了在React项目中如何使用`createContext`和`useContext`来实现按钮级别的权限控制。
65 0
|
6月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理按钮的点击行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理按钮的点击行为?
58 1
|
前端开发 JavaScript
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
183 0
|
前端开发
React基础语法07-点击按钮,获取input框的值(通过事件对象获取)
React基础语法07-点击按钮,获取input框的值(通过事件对象获取)
116 0
|
前端开发
前端项目实战捌拾柒react-admin+material ui-踩坑-List的用法之aside组件FilterLiveSearch搜索按钮
前端项目实战捌拾柒react-admin+material ui-踩坑-List的用法之aside组件FilterLiveSearch搜索按钮
81 0
|
前端开发
#yyds干货盘点 【React工作记录三十二】ant design table中增加按钮的两种方式
#yyds干货盘点 【React工作记录三十二】ant design table中增加按钮的两种方式
131 0
|
前端开发
#yyds干货盘点 【React工作记录十】三元对按钮进行判断操作
#yyds干货盘点 【React工作记录十】三元对按钮进行判断操作
86 0
|
前端开发
#yyds干货盘点 【React工作记录九】switch对按钮进行判断操作
#yyds干货盘点 【React工作记录九】switch对按钮进行判断操作
103 0
关于react-Ant Design框架Button按钮的基础用法
最近在学习react-Ant Design框架,把button组件一些基础用法记录一下
497 0
关于react-Ant Design框架Button按钮的基础用法