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

 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.setState({
      num: value,
    });
  }
  caseEdit =()=>{
    const {
      form: { getFieldDecorator },
    } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 20 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 18 },
        sm: { span: 12 },
      },
    };

    let {num} = this.state;
    if(num==undefined){
      num=1;
    }
    // console.log(num)

    const selectValue = this.state.value;
    const departmentsTreeList = this.props.departmentsTreeList;

    switch (num) {
      case 1 :
        return (<span>{
          <td>
            <FormItem {...formItemLayout} >
              {getFieldDecorator('field', {
                initialValue: 'school_id',
              })(<span className={styles.dontshow}>所属校区</span>)}
            </FormItem>
            <FormItem {...formItemLayout}>
              {getFieldDecorator('to_value', {
                initialValue: selectValue,
              })(
                <TreeSelect
                  showSearch
                  style={{ width: 200 }}
                  value={this.state.value}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  placeholder="请选择所属校区"
                  allowClear
                  onChange={this.onChange}
                >
                  {this.renderTreeNodes(departmentsTreeList)}
                </TreeSelect>
              )}
            </FormItem>
          </td>

        }</span>);
        break;
      case 2 :
        return (<span> {
          <td>
            <FormItem {...formItemLayout} >
              {getFieldDecorator('field', {
                initialValue: 'gender',
              })(<span className={styles.dontshow}>孩子性别</span>)}
            </FormItem>
            <FormItem {...formItemLayout} >
              {getFieldDecorator('to_value', {})(
                <Input style={{ width: 200 }} placeholder="孩子性别"/>
              )}
            </FormItem>
          </td>
        }</span>);
        break;

      default :
        return (<span> {
          <td>
            <FormItem {...formItemLayout} >
              {getFieldDecorator('to_value', {})(
                <Input style={{ width: 200 }} placeholder=""/>
              )}
            </FormItem>
          </td>
        }</span>);
        break;
    }

  };

  renderBatchEditor() {
    const {
      form: { getFieldDecorator },
    } = this.props;

    const modalVisible2 = this.props.modalVisible2;
    const width=600;
    const formItemLayout = {
      labelCol: {
        xs: { span: 20 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 18 },
        sm: { span: 12 },
      },
    };
    return (
      <Modal
        width={width}
        visible={modalVisible2}
        onCancel={this.handleCancel2}
        onOk={this.handleOk2}
        footer={null}
        destroyOnClose
      >
        <Form onSubmit={this.handleBatchEditor} layout="inline">
          <div style={{paddingLeft:"20px",paddingRight:"20px",paddingBottom:"80px",paddingTop:"80px"}}>
            <tr>
              <td style={{lineHeight:"40px"}}>
                <FormItem {...formItemLayout}>
                  {getFieldDecorator('num', {
                    initialValue: 1,
                  })(
                    <Select
                      style={{ width: 200 }}
                      showSearch
                      onChange={this.batch}
                      optionFilterProp="children"
                      filterOption={(input, option) =>
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }
                    >
                      <Option key={1} value={1}>所属校区</Option>
                      <Option key={2} value={2}>孩子性别</Option>

                    </Select>
                  )}
                </FormItem>
              </td>
              <td style={{lineHeight:"40px"}}>替换成&nbsp;&nbsp;&nbsp;&nbsp;</td>
              <td style={{lineHeight:"40px"}}> {this.caseEdit()}</td>
            </tr>
            <Button type="primary" htmlType="submit" style={{marginTop:"20px",}}>
              {'保存'}
            </Button>
          </div>
        </Form>
      </Modal>
    );
  }
render() {

return(
    <Button style={{ marginLeft: 5 }}  className="ant-btn" onClic{this.showModal2}>
          <span>批量编辑</span>{this.renderBatchEditor()}
     </Button>
)

}

function mapStateToProps(state) {
  return { ...state.students };
}
export default connect(mapStateToProps)(StudentsList);