react中的step组件怎么根据后台传过来的数据state=2进度条为蓝色state=1进度条为灰色呢？

Question

这个怎么根据后台传过来的数据state=2进度条为蓝色 state=1进度条为灰色
蓝色代表已完成 灰色代表为完成
成了会有赞赏哦！

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

state和class配合

Answer 2

<Steps status={state === 2 ? 'finish' : 'process'} current={state}/>

Answer 3

看一下你的接口文档，state代表什么，有哪些值？然后仔细读一下ant-design steps的文档再来看这个问题

Answer 4

  state = {
    status: '',
  };

  componentWillMount() {
  // 获取数据...假设 获取到的status字段为当前任务的状态
    const status = 2
    this.setState({
      status,
    })
  }

const { status } = this.state;
...
<Steps current={status}>
  <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>

state 记得要和当前步骤对应