react-开发经验分享-Steps横竖业务进度条的具体使用方法

Author：Mr.柳上原

• 付出不亚于任何的努力
• 愿我们所有的努力，都不会被生活辜负
• 不忘初心，方得始终

ant框架里，Steps横竖业务进度条的具体使用方法
在ant里介绍了Steps组件，进度条
不过没有具体的对接后端数据的使用方法
特别是Steps组件里最重要的status状态控制方法
分享一下在项目开发中遇到的问题以及解决方法
具体如下：

// 首先根据ant官方Steps组件使用方法引入到react里

// 使用state来存储后端数据并动态更新
this.state = {
    projectData: {}, // 业务数据
    reportFollow: [], // 流程数据
    newReportFollow: [], // 驻场数据
}

// 固定的静态进度条使用方法
crosswiseStep = [
        {
            title: "待确认",
            icon: ,
            // description: "This is a description.",
            id: 0,
        },
        {
            title: "待看房",
            icon: ,
            // description: "This is a description.",
            id: 1,
        },
        {
            title: "带认购",
            icon: ,
            // description: "This is a description.",
            id: 3,
        },
        {
            title: "已成交",
            icon: ,
            // description: "This is a description.",
            id: 4,
        },
    ]

// 初始数据
    initialData = async () => {
        let reportId = this.props.location.state.id || '';

        let res = await ProjectDetailsApi.getReport(reportId);
        let data = res.extension || {}; // 后端请求到的数据
        console.log(res, '表格初始数据');
        if (res.code == '0') {
             let reportFollow = []; // 驻场流程
             let newLording = ''; // 横向进度条状态码

             reportFollow = data.reportFollow;

             // 固定进度条状态判断
             data.reportFollow.map((item, index) => {
                // 0 - 待确认 / 1 - 待看房 / 3 - 待认购 / 4 - 已成交
               if(item.transactionsStatus == 0 || item.transactionsStatus == 1 || item.transactionsStatus == 3 || item.transactionsStatus == 4) {
                    newLording = item.transactionsStatus;
                }

              this.setState({
                  reportFollow,
                  lording: newLording,
             })
        } else {
            message.error('获取列表数据失败');
        }
    }

// render渲染固定的静态进度条

      {
         this.crosswiseStep.map((item, index) => {
           return (
                
               )
           })
        }


// render渲染动态进度条

    {
        reportFollow.map((item, index) => {
           return (
                 
                            
{item.createUser}
                            
{item.createTime}
                          

} /> ) }) }