CategoryItem.js

import React, { Component } from 'react';
import {Flex, WingBlank} from 'antd-mobile';
import {Link} from 'react-router-dom'
import './CategoryItem.scss';

export default class CategoryItem extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const {course_title, price1, price0, first_level_tip, image_name, upgrade, upgradeImg, course_id, share} = this.props;
        return (
            <WingBlank>
                <div className={'scholarship-category'}>
                    <Link to={`/detail?id=${course_id}`} >
                    <div className={'imageContainer'}>
                        <img className={'image'} src={image_name}></img>
                        {
                            upgrade ? (
                                <img src={upgradeImg}></img>
                            ) : (null)
                        }
                    </div>
                    </Link>
                    <div className={'content'}>
                        <Flex direction='column' justify='around' align='start' style={{height: '90px'}}>
                            <Link to={`/detail?id=${course_id}`} ><p className={'text-overflow-one'}>{course_title}</p></Link>
                            <p><span className={'priceNow'}>{`￥${price1}`}</span><span className={'pricePrimary'}>{`￥${price0}`}</span></p>
                            <div className={'shareMoney'} onClick={()=>{share(course_id, first_level_tip)}}>{`分享赚${first_level_tip}元`}</div>
                        </Flex>
                    </div>
                </div>
            </WingBlank>
        )
    }
}