按老師的課程學完了，供大家參考

源碼 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-

這一節(jié)代碼已經(jīng)完成,css也寫了