index.js

import React, { Component } from 'react'
import './video-catalog.scss'
import { Link } from "react-router-dom";
import classnames from 'classnames'


class VideoCatalog extends Component {

    handleClick = (i) => {
        this.props.selectVideo(i)
    }

    render() {
        return (
            <div className='video-catalog'>
                <ul>
                    {
                        this.props.videoCatalog.map((item, index) => {
                            return (
                                <li 
                                    key={item.id}
                                    className={classnames({active: this.props.activeIndex === index})}
                                >
                                    <div 
                                        className="video-title" 
                                        onClick={this.handleClick.bind(this, index)}
                                    >
                                        <span className="title">{item.name}</span>
                                        <span className='duration'>{item.duration}</span>
                                        <i className={classnames(`iconfont`,
                                            [item.video_auth === 0
                                                ? 'iconiconfront-74'
                                                : 'iconplay_hovericon'],
                                        )}/>
                                    </div>
                                    {
                                        (item.practice && item.practice.qid)
                                            ? <Link to={{
                                                pathname: item.practice.is_tested ? '/campResolve' : '/campTest',
                                                search: `?keshi_id=${item.id}&qid=${item.practice.qid}`,
                                                state: {from: `/play/video${window.location.search}`}
                                            }}>
                                                <div className="exercise">
                                                    课后练习：{item.practice.title}
                                                    <i className={classnames('iconfont',!item.video_auth ? 'iconiconfront-74' : item.practice.is_tested ? 'iconiconfront-3' : '')}/>
                                                </div>
                                            </Link>
                                            : null
                                    }
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default VideoCatalog;