index.js

import React, { Component } from 'react'
import './index.scss'

export default class Test extends Component {
  Change = (data) => {
    let cn = ["一", "二", "三", "四", "五", "六", "七", "八", "九", '十'];
    let newStr = ''
    let str = data.toString()
    let ci = Number(str) % 10
    let cs = Math.floor(Number(str) / 10)
    let cv = ''
    if (str.length > 1) {
        if(cs==1){
            cv = ci >= 1 ? cn[9] + cn[ci - 1] : cn[9]
        } else {
            cv = ci > 1 ? cn[cs - 1] + cn[9] + cn[ci - 1] : cn[cs - 1] + cn[9]
        }
    } else {
        cv = cn[ci - 1]
    }
    newStr = str.replace(str, cv)
    return newStr;
}

  render() {
    return (
      <div className={'test_container'}>
        <p className={'title'}>课 / 后 / 实 / 操</p>
        <p className={'sub_title'}>涵盖完整知识体系，让你掌握实用高效的编程技巧</p>
        <div className={'table_container'}>
          <div className={'table_head'}>
            <span>序号</span>
            <span>实操项目</span>
          </div>
          <div className={'table_body'}>
            {
              this.props.practice.map((item, index)=>{
                return <div className="stage-item" key={index}>
                  <div className='stage'>{`第${this.Change(item.stage)}阶段 ${item.name}`}</div>
                  {
                    item.questions.map((question, index)=>{
                      return <div key={index} className={'line'}>
                        <span>{question.number}</span>
                        <div className={'test_name'}>
                          <img src={question.icon} alt=""/>
                          <p>{question.name}</p>
                        </div>
                      </div>
                    })
                  }
                </div>
              })
            }
          </div>
          <div className={'table_bottom'}>
            {
              this.props.allPracticeShow ? (
                <div onClick={()=>this.props.hide(2)}>
                  <p>收起</p>
                  <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shouqi.png" alt=""/>
                </div>
              ) : (
                <div onClick={()=>this.props.show(2)}>
                  <p>展开更多</p>
                  <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhankai.png" alt=""/>
                </div>
              )
            }
          </div>
        </div>
      </div>
    )
  }
}