首先安装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
