鍍金池/ 問答/HTML/ react中的step組件怎么根據(jù)后臺傳過來的數(shù)據(jù)state=2進度條為藍色st

react中的step組件怎么根據(jù)后臺傳過來的數(shù)據(jù)state=2進度條為藍色state=1進度條為灰色呢？

這個怎么根據(jù)后臺傳過來的數(shù)據(jù)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>
        );
    }
}

圖片描述

回答
編輯回答
扯不斷

state和class配合

2017年9月6日 19:51
編輯回答
離人歸

看一下你的接口文檔，state代表什么，有哪些值？然后仔細讀一下ant-design steps的文檔再來看這個問題
圖片描述

2018年1月21日 15:39
編輯回答
離魂曲
<Steps status={state === 2 ? 'finish' : 'process'} current={state}/>
2017年9月30日 20:41
編輯回答
醉淸風
  state = {
    status: '',
  };

  componentWillMount() {
  // 獲取數(shù)據(jù)...假設 獲取到的status字段為當前任務的狀態(tài)
    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 記得要和當前步驟對應

2017年5月7日 22:59