videoList.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import React, { Component } from 'react';
  2. import { connect } from "react-redux";
  3. import './videoList.css'
  4. const mapStateToProps = (state) => ({
  5. });
  6. const mapDispatchToProps = (dispatch) => ({
  7. });
  8. class VideoListViews extends Component {
  9. /*
  10. * 构造函数
  11. *
  12. * */
  13. constructor() {
  14. super();
  15. this.state = {
  16. list: [{
  17. image: require('./../../assets/images/kemu1.png'),
  18. title: "科目一"
  19. }, {
  20. image: require('./../../assets/images/kemu2.png'),
  21. title: "科目二"
  22. }, {
  23. image: require('./../../assets/images/kemu3.png'),
  24. title: "科目三"
  25. }, {
  26. image: require('./../../assets/images/kemu4.png'),
  27. title: "科目四"
  28. }]
  29. };
  30. }
  31. /*
  32. *
  33. * 生命周期一
  34. *
  35. * */
  36. componentWillMount() {
  37. /*
  38. *
  39. * 如果是ios设备默认第一次不是播放状态,android没事
  40. *
  41. * */
  42. /*
  43. *
  44. * 请求数据
  45. *
  46. *
  47. * */
  48. }
  49. /*
  50. *
  51. * 生命周期二
  52. *
  53. * */
  54. componentDidMount() {
  55. }
  56. /*
  57. * 渲染
  58. * */
  59. render() {
  60. return (
  61. <div className="container">
  62. <div className="list">
  63. {
  64. this.state.list.map((item, index) => {
  65. return (<div className="list-item" key={index}>
  66. <img src={item.image} alt="图片" />
  67. <span className="list-item-text top54 ">{item.title}</span>
  68. <span className="list-item-text top128 left40">《视频讲解》</span>
  69. </div>)
  70. })
  71. }
  72. </div>
  73. </div>
  74. )
  75. }
  76. componentWillUnmount() {
  77. }
  78. }
  79. export default connect(mapStateToProps, mapDispatchToProps)(VideoListViews);