react-ant-design根据状态不同显示不同的状态点和操作详解

1、应用场景： 表格数据中，需要根据状态不同显示不同的状态点或者操作

2、直接贴出代码，至于一些状态值需要怎么取不再。。

• 状态

 {
        title: '状态',
        dataIndex: 'state',
        key: 'state',
        render: (text, record) => {
          let flag;
          const { state } = record;
          switch (state) {
            case 1:
              flag = 'success';
              break;
            case 2:
              flag = 'processing';
              break;
            case 3:
              flag = 'warning';
              break;
            case 4:
              flag = 'default';
              break;
            default:
              break;
          }
          return (
            <span>
              <Badge status={flag} style={{ marginBottom: '3px' }} />
              {constants.registratState[record.state]}
            </span>
          );
        },
      },

• 操作
  涉及到三元运算符，跳转绑定id，怎么跳转可以查看我的另一篇文章点击

 {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        render: (text, record) => {
          const { state } = record;
          switch (state) {
            case 1:
            case 2:
              return (
                <span>
                <a onClick={this.handleGoToApplyList.bind(this, record.registrationId)}> 
                  查看&nbsp;</a>
                <Dropdown 
                  overlay={
                    <Menu>
                      <Menu.Item>
                        <a onClick={this.handleEdit.bind(this, record.registrationId)}>
                          编辑
                        </a>
                      </Menu.Item>
                      {record.state == '2' ? (
                        <Menu.Item>
                          <a rel="" onClick={this.cancelRegistrationModal.bind(this, record.registrationId)}>
                            取消
                          </a>
                        </Menu.Item>
                      ) : (
                          <Menu.Item>
                            <a rel="" onClick={this.handleDeleteRegistration.bind(this, record.registrationId)}>
                              删除
                           </a>
                          </Menu.Item>
                        )}
                    </Menu>
                  }
                >
                  <a className="ant-dropdown-link">
                    |&nbsp;更多
                    <Icon type="down" />
                  </a>
                </Dropdown>
              </span>
              )
            case 3:
            case 4:
              return (
                <span>
                <a onClick={this.handleGoToApplyList.bind(this, record.registrationId)}> 
                  查看&nbsp;</a>    
                  </span>
              )
            default:
              break;
          }
      },
    },

3、细节问题实在不懂可以私信