How can the step component in react make the state=2 progress bar blue and the state=1 progress bar gray according to the data sent from the background?

according to the data sent from the background, the state=2 progress bar is blue state=1 progress bar is gray
blue represents completed gray represents completion
will be appreciated! 

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>
        );
    }
}

React.js javascript
Apr.05,2021

state and class cooperate 



  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 remember to correspond to the current step

Previous: The problem of index calculation on the second page of element ui table

Next: Can't vue iview use both "render" and "editable" in a table?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu