import * as React from "react"; import { withRouter, RouteComponentProps,Link } from "react-router-dom"; import { Typography, Image } from "antd"; interface PropsType extends RouteComponentProps { id: string | number; size: "large" | "small"; imageSrc: string; price: number | string; title: string; } const ProductImageComponent: React.FC<PropsType> = ({ id, size, imageSrc, price, title, history, location, match, }) => { return ( <Link to={`detail/${id}`} > {size === "large" ? ( <Image src={imageSrc} height={280} width={480} /> ) : ( <Image src={imageSrc} height={120} width={240} /> )} <div> <Typography.Text type="secondary">{title.slice(0, 25)}</Typography.Text> <Typography.Text type="danger" strong> ¥{price}起 </Typography.Text> </div> </Link> ); }; export const ProductImage = withRouter(ProductImageComponent);