【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];
          }

总结

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

相关文章
|
6天前
|
前端开发 UED 开发者
React 悬浮按钮组件 FloatingActionButton
悬浮按钮(FAB)是常见的UI元素,用于提供突出的操作。本文介绍如何在React中使用Material-UI创建美观的FAB组件,涵盖基本概念、实现方法及常见问题解决。通过代码示例和优化技巧,帮助开发者提升用户体验,确保按钮位置、颜色、交互反馈等方面的表现,同时避免无障碍性和性能问题。
104 80
|
14天前
|
前端开发 JavaScript 开发者
React 按钮组件 Button
本文介绍了 React 中按钮组件的基础概念,包括基本的 `<button>` 元素和自定义组件。详细探讨了事件处理、参数传递、状态管理、样式设置和可访问性优化等常见问题及其解决方案,并提供了代码示例。帮助开发者避免易错点,提升按钮组件的使用体验。
140 77
|
25天前
|
前端开发 开发者
React 单选按钮 Radio Button 详解
本文介绍 React 中单选按钮的基础概念、基本用法、常见问题及进阶技巧,包括如何正确设置 `checked` 属性、确保 `name` 属性一致、处理 `onChange` 事件,以及动态生成单选按钮和使用受控组件等,通过代码示例详细解析,帮助开发者有效管理状态和优化用户交互。
65 32
|
24天前
|
存储 前端开发 UED
React 中的多选按钮(Checkbox)
本文详细介绍了在 React 中实现多选按钮(Checkbox)的方法,包括基础用法、常见问题及解决策略、进阶技巧如使用受控组件和第三方库,旨在帮助开发者更好地理解和应用多选按钮组件。
72 19
|
4月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
60 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
4月前
|
缓存 前端开发 JavaScript
在react项目中实现按钮权限createContext && useContext
文章介绍了在React项目中如何使用`createContext`和`useContext`来实现按钮级别的权限控制。
83 0
|
8月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理按钮的点击行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理按钮的点击行为?
74 1
|
前端开发 JavaScript
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
192 0
|
前端开发
React基础语法07-点击按钮,获取input框的值(通过事件对象获取)
React基础语法07-点击按钮,获取input框的值(通过事件对象获取)
126 0
|
前端开发
前端项目实战捌拾柒react-admin+material ui-踩坑-List的用法之aside组件FilterLiveSearch搜索按钮
前端项目实战捌拾柒react-admin+material ui-踩坑-List的用法之aside组件FilterLiveSearch搜索按钮
86 0