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、細節問題實在不懂可以私信