按老师的课程学完了，供大家参考

源码 https://github.com/carrieguo/react-demo-my-order.git

.orderItem{display: flex;padding: 11px 10px 11px 15px;justify-content: space-between;align-items: center;}.orderItem__picContainer {padding-right: 10px;display: inline-block;}.orderItem__pic{width: 90px;height: 90px;}.orderItem__content{display: inline-block;width: calc(100% - 100px);}.orderItem__product{max-width: 237px;font-size: 17px;font-weight: 700;color:#111;padding-top: 6px;padding-right: 18px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.orderItem__shop{text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 13px;color: #777;padding-top: 9px;padding-bottom: 13px;}.orderItem__detail{display: flex;justify-content: space-between;height: 22px;line-height: 22px;padding-right: 4px;}.orderItem__price{font-size: 13px;color: #777;vertical-align: 1px;margin-left: 10px;}.orderItem__price::before{content: "\A5";margin-right: 1px;}.orderItem__btn{width: 80px;height: 22px;text-align: center;color: #fff;border: 0;font-size: 14px;}.orderItem__btn--red{background-color: #e9203d;}.orderItem__btn--grey{background-color: #999;}.orderItem__commentContainer{width:100%;}

import React, { Component } from 'react';import './style.css';class OrderItem extends Component {render() {const {shop,product, price, picture,ifCommented} = this.props.data;return (<div className="orderItem"><div className="orderItem__picContainer"><img src = {picture}alt = ""className = "orderItem__pic" /></div><div className="orderItem__content"><div className="orderItem__product">{product}</div><div className="orderItem__shop">{shop}</div><div className="orderItem__detail"><div className="orderItem__price">{price}</div><div>{ifCommented ? (<button className="orderItem__btn orderItem__btn--grey">已评价</button>):(<button className="orderItem__btn orderItem__btn--red">评价</button>)}</div></div></div></div>);}}export default OrderItem;

https://github.com/vkcyan/gotoReact-

这一节代码已经完成,css也写了