react中的step组件的使用方法？

Question

react中的step组件怎么根据后台传过来的数据state=1 2 3 4对应组件中status的四种状态wait process finish error 怎么写呢

render(){
        const {visible,onCancel,auditRuleList} = this.props;
        console.log(auditRuleList)
        const dataSource = auditRuleList ? (auditRuleList.result && Array.isArray(auditRuleList.result))? auditRuleList.result.map((item,index)=><Step
            key={item.id} title={item.name} description={moment(item.time).format('YYYY/MM/DD')}/>) :[]:[];
        return (
            <Modal
                visible={visible}
                title={"审核情况"}
                width="80vw"
                onCancel={onCancel}
                onOk={onCancel}
            >

            <Steps progressDot current={1}>
                {dataSource}
            </Steps>

            </Modal>
        );
    }
}

Answer 1

  checkStatus = () => {
    const state = 3 // 假设这是后台返回的数据
    switch (state) {
      case 1:
        return 'wait';
      case 2:
        return 'process';
      case 3:
        return 'finish';
      case 4:
        return 'error';
      default: return null;
    }
  }
...

<Steps status={this.checkStatus()}>
  <Steps.Step title="Finished" description="This is a description." />
  <Steps.Step title="In Progress" description="This is a description." />
  <Steps.Step title="Waiting" description="This is a description." />
</Steps>

Answer 2

你这个问题，刚刚学习代码就开始用框架不太好，你还是先打基础吧