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