应用介绍:
总共三个页面,起始提示页,答题页,以及分数页;
说明:
用路由链接3个页面,提示页到答题页直接使用Link跳转,答题页跳转到分数页需要携带分数及答对的题目数,因此使用:
hashHistory.push({ pathname: ‘/Score’,query:{score:score,number:number}});
将参数放到URL后面,到了分数页再获取渲染:
let score=this.props.location.query.score;
let number=this.props.location.query.number;
本项目的代码只分享第二页的答题时的相关处理:
本页做法是建立答题页的父组件,把点击答案的li列表作为子组件引入,相关的数据处理在子组件都完成了,如果再做一次,我会直接把答题页作为一个组件来编写,不用子组件。
首先进入第二页时,要向后台获取数据:
这样就能很顺滑地切换题目的内容了。
React+React-router+webpack 一个微信答题SPA小应用
最新推荐文章于 2022-11-18 20:52:25 发布