react➕antd中使用switch...case...

最新推荐文章于 2023-05-18 10:17:04 发布

小红同学5

最新推荐文章于 2023-05-18 10:17:04 发布

阅读量1.4k

点赞数

分类专栏： react antd

本文链接：https://blog.csdn.net/xh_960125/article/details/89849821

版权

本文介绍了如何在React应用中结合Ant Design，利用switch...case...语句进行条件渲染和逻辑控制。内容包括使用效果的展示，以及关键和详细代码的分享。

摘要由CSDN通过智能技术生成

1，使用switch...case...效果

2，主要代码

 switch (num) {
    case 1 :
      return (<span>{}</span>);
      break;
    case 2 :
      return (<span> {}</span>);
      break;

    default :
      return (<span> {}</span>);
      break;
  }

};

3，详细代码

import React, { PureComponent } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'dva';
import { Row, Col, Table, Radio, Input, Form, Button, Icon, DatePicker, Select, Modal, Popconfirm, Checkbox, message, Tag,
  TreeSelect,Menu,Dropdown, Tree,notification,Alert,Upload,Popover
} from 'antd';
import styles from './studentsList.less';

const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const SelectOption = Select.Option;
const { Search, TextArea } = Input;
const dateFormat = 'YYYY/MM/DD';
const treeData = [{}];


@Form.create()
class StudentsList extends PureComponent {

  batch = value =>{
    this.setS