使用react搭建前端测试答题页面

首先安装react的脚手架工具：yarn add -g create-react-app
创建项目：create-react-app f2etest

目标效果：

效果

拆分页面为头部和列表部分：

新建组件

App.js引入组件

import Nav from './components/Nav.js'
import TestList from './components/TestList.js'

jsx部分返回

  render(){
    return (
      <div className="App">
        <Nav onactive={this.state.active} gradingnum = {this.state.gradingnum} showalert2={this.showalert2.bind(this)}/>
        <div className="classification">
            <p onClick={()=>this.onactive(1)} className={this.state.active == 1 ? 'active' : 'default'}>基础知识</p>
            <p onClick={()=>this.onactive(2)} className={this.state.active == 2 ? 'active' : 'default'}>vue知识</p>
            <p  onClick={()=>this.onactive(3)} className={this.state.active == 3 ? 'active' : 'default'}>react知识</p>
        </div>
        <TestList key={this.state.active} onactive={this.state.active} showalert={this.showalert.bind(this)} grading={this.grading.bind(this)}/>
        {
          this.state.alertshow === true ? <div className="alertshow">{this.state.alerttext}</div>: ''
        }
        {
          this.state.alertshow2 === true ? <div className="alertshow2">{this.state.alerttext2}</div>: ''
        }
      </div>
    );
  }

组件下面说，首先定义答题类型选择，添加事件，然后根据状态修改class。

 //选择答题类型
  onactive(num){
    this.setState({
      active:num
    })
  }

Testlist组件下方代码为信息提示代码。事件如下：

 //正确与否提示
  showalert(text){
    let _this = this;
    this.setState({
      alerttext:text,
      alertshow:true
    })
    setTimeout(function(){
      _this.setState({
        alerttext:'',
        alertshow:false
      })
    },800)
  }
  //等级变动提示
  showalert2(text){
    let _this = this;
    setTimeout(function(){
      _this.setState({
        alerttext:"",
        alertshow:false,
        alerttext2:text,
        alertshow2:true
      })
    },900)
    setTimeout(function(){
      _this.setState({
        alerttext2:'',
        alertshow2:false
      })
    },2000)
  }

等级变动事件交由Nav组件触发，答题正确与否交由TestList组件触发。

组件Nav代码如下：

import React, { Component } from "react";

class Nav extends Component{
  constructor(props){
    super(props);
    this.state={
      gradingnum:this.props.gradingnum,
      activeClass:"基础知识"
    }
  }
  componentWillReceiveProps(nextProps){
    if(this.props.onactive != nextProps.onactive){
      switch(nextProps.onactive){
        case 1:
          this.setState({
            activeClass:"基础知识"
          })
          break;
        case 2:
          this.setState({
            activeClass:"vue知识"
          })
          break;
        case 3:
          this.setState({
            activeClass:"react知识"
          })
          break;
      }
    }
    if (this.props.gradingnum < nextProps.gradingnum){
      this.setState({
        gradingnum:nextProps.gradingnum
      })
      this.props.showalert2(`恭喜老铁升级!当前${this.state.activeClass}等级P${nextProps.gradingnum}`);
    }else if(this.props.gradingnum > nextProps.gradingnum){
      this.setState({
        gradingnum:nextProps.gradingnum
      })
      this.props.showalert2(`老铁行不行啊？当前${this.state.activeClass}等级P${nextProps.gradingnum}`)
    }
  }
  render(){
    return (
        <header className="App-header">
          <h3>前端测试题</h3><h4>当前{this.state.activeClass}等级: <span className="grading">P{this.state.gradingnum}</span></h4>
        </header>
    );
  }
}

export default Nav;

componentWillReceiveProps(nextProps)生命周期函数会在props发生变化时执行：

1.组件初次渲染时不会执行componentWillReceiveProps；
2.当props发生变化时执行componentWillReceiveProps；
3.在这个函数里面，旧的属性仍可以通过this.props来获取；
4.此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。即可以根据属性的变化，通过调用this.setState()来更新你的组件状态，在该函数中调用 this.setState() 将不会引起第二次渲染。
5.也可在此函数内根据需要调用自己的自定义函数，来对prop的改变做出一些响应。

函数中对比变化后的数据nextProps和之前的数据this.props，当父组件选择类型变化后，匹配onactive修改显示名称。再对比gradingnum等级，触发父组件showalert2，提示响应的信息。

TestList组件如下：

import React, { Component } from "react";
import axios from 'axios';

export default class TestList extends Component{
    constructor(props) {
        super(props);
        this.state={
            openshow: false,
            list:'',
            surenum:0,
            errornum:0
        }
        this.open = this.open.bind(this);
        this.choice = this.choice.bind(this);
    }
    componentWillMount() {
        let _this = this;
        //请求数据
        axios({
            methods: 'get',
            url: `https://www.xinwanju.cn/fetest?active=${_this.props.onactive}`,
            headers:{"Content-Type":"application/x-www-form-urlencoded"},
            }).then(function (response) {
                let newdata = response.data.map(function (item){
                    return {...item,state:false,openshow:false}
                })
                _this.setState({
                    list:newdata
                })
            })
            .catch(function (error) {
              console.log(error);
            })
    }
    //产看答案
    open(i){
        if(this.state.list[i].state == true){
            this.state.list[i].openshow = !this.state.list[i].openshow;
            let newlist = Object.assign([],this.state.list);
            this.setState({
                list: newlist
            })
        }else{
            this.props.showalert("大佬请先选择答案!")
        }
    }
    //选择答案
    choice(e,i){
        if(e.target.dataset.id != undefined){
            if(this.state.list[i].correct == e.target.dataset.id){
                //正确答案计数
                this.setState({
                    surenum: this.state.surenum+=1
                })
                //正确提示
                switch(this.state.surenum){
                    case 1:
                        this.props.showalert(`first blood !`)
                        break
                    case 2:
                        this.props.showalert(`double kill !`)
                        break 
                    case 3:
                        this.props.showalert(`triple kill !`)
                        break
                    case 4:
                        this.props.showalert(`quatary kill !`)
                        break  
                    case 5:
                        this.props.showalert(`penta kill !`)
                        break    
                    case 6:
                        this.props.showalert(`大佬超神了 !`)
                        break 
                    default:
                        this.props.showalert(`震惊 ! 大佬${this.state.surenum}杀了 !`)
                        break                            
                }
                judge(this)
            }else{
                //错误答案计数
                this.setState({
                    errornum: this.state.errornum+=1
                })
                this.props.showalert("菜逼加油啊!")
                judge(this)
            }
            //nav p0-p8定级
            function judge(_this){
                if(_this.state.surenum >= 3){
                    let start = _this.state.errornum/_this.state.surenum;
                    switch(true){
                        case start<=0.1:
                            _this.props.grading(8)
                            break
                        case start >0.1 && start<=0.2:
                            _this.props.grading(7)
                            break 
                        case start >0.2 && start<=0.3:
                            _this.props.grading(6)
                            break
                        case start >0.3 && start<=0.4:
                            _this.props.grading(5)
                            break  
                        case start >0.4 && start<=0.5:
                            _this.props.grading(4)
                            break    
                        case start >0.5 && start<=0.6:
                            _this.props.grading(3)
                            break 
                        case start >0.6 && start<=0.7:
                            _this.props.grading(2)
                            break 
                        case start>0.8:
                            _this.props.grading(1)
                            break                          
                    }
                }
            }
            this.state.list[i].state = true;
            let newlist = Object.assign([],this.state.list);
            this.setState({
                list: newlist
            })
        }
    }
    listdata(){
        let list;
        let _this = this;
        if(this.state.list !== ""){
            list = this.state.list.map((item,i)=>{
                return (
                    <div className="list" key={i} onClick={(e)=>this.choice(e,i)}>
                        <p className="question"><span>问：</span>{item.title}</p>
                        <p className="answer">答：</p>
                        <ul className="answer_list">
                            {item.answer.map((item,i)=>{
                                return <li data-id={i} key={i}>{item}</li>
                            })}
                        </ul>
                        <div className="explain">
                            <p className="explain_title" onClick={()=>this.open(i)}>答案<span className={
                                item.openshow == true?'explain_triangle_df':'explain_triangle'
                            }></span></p>
                            {item.openshow  == true ?
                                <div className="explain_content">
                                    <p dangerouslySetInnerHTML={{__html: item.explain}}></p>
                                    <h3>相关链接：<a href={item.link}>{item.link}</a></h3>
                                </div>
                            : ''}
                        </div>
                    </div> 
                )
            })
        }
        return list;
    }
    render() {
        return (
            <div>{this.listdata()}</div>
        );
    }
}

componentWillMount组件渲染之前请求数据，将父组件传入的答题类型onactive，传给服务端，获取响应数据。为每条数据添加两个状态state和openshow，state用于判断此题是否答过，openshow用于展示隐藏答案部分。
open()函数判断当前题是否答过，如果答过，变换答案展示状态，没有答过，触发父级showalert事件，给与提示。
choice()函数判断当前点击的答案列表，是否存在data-id属性，如果存在说明点击的是答案列表。如果点击的列表id与list中正确答案id一样，证明回答正确，正确个数递增，switch匹配给与响应提示，并触发judge()。如果回答错误，错误题数递增，给与响应提示。
judge()函数计算正确题目和错误题目的比例，然后修改当前p0-p8的显示级别。

搞定完成。

项目预览地址：https://www.xinwanju.cn/fetestview
代码地址：https://github.com/aotuotage/F2eTest

代码完成后npm run build打包，配置到服务器。
我这里是Express搭建的服务，需要放到views里面。由于当初选择的模板为ejs，需要将build中的index.html修改为index.ejs。

Express routers中新建fetestview.js，render这个页面。

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/fetestview', function(req, res, next) {
  res.render('build/index');
});

module.exports = router;

但现在访问这个地址发现js和css路径错误，因为本地服务是直接当根目录访问的，将build中的static放到Express的公开目录public中就可以了。

image.png