为了账号安全,请及时绑定邮箱和手机立即绑定

React 16实现订单列表及评价功能

艾特老干部 Web前端工程师
难度中级
时长 1小时44分
学习人数
综合评分9.60
30人评价 查看评价
9.7 内容实用
9.5 简洁易懂
9.6 逻辑清晰
  • //list item css file

    .orderItem {

    display: block;

    padding: 11px 10px 11px 15px;

    }


    .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-right: 8px;

    box-sizing: border-box;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    }


    .orderItem__shop {

    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;

    }


    .orederItem__btn {

    width: 80px;

    height: 22px;

    text-align: center;

    color: #fff;

    border: 0;

    font-size: 14px;

    }


    .orederItem__btn--red {

    background-color: #e9203d;

    }


    .orederItem__btn--grey {

    background-color: #999;

    }


    .orderItem__StarContainer{

    margin: 3px 0;

    }


    .orderItem__star {

    font-size: 22px;

    cursor: pointer;

    color: #ccc;

    }


    .orderItem__star--red {

    color: #e9203d;

    }


    .orderItem__star--light {

    color: #ccc;

    }


    查看全部
    0 采集 收起 来源:订单项组件

    2019-02-28

  • React基础知识:

    1. 列表和Keys

    2. 生命周期事件函数

    3. 表单

    查看全部
  • React的基础知识:

    1. 构建用户界面的Javascript库。

    2. JSX语法声明式的视图层。

    3. 以组件为基础

    查看全部
  • VSCode安装的插件

    npm intellisense : 在import 时自动补全npm modules

    path intellisense: 补全文件名

    Prettier: 代码格式化

    Reactjs code snippets: 代码片段


    查看全部
    0 采集 收起 来源:课程简介

    2019-02-05

  • 开发环境要求

    查看全部
    0 采集 收起 来源:课程简介

    2019-02-05

  • public下面的资源文件不会被webpack打包。可以直接通过http用fetch请求到。

    查看全部
  • 有源码么,没有样式

    查看全部
    0 采集 收起 来源:订单项组件

    2018-12-22

  • 被标记unsafe: 

    1. componentWillMount

    2. componentWillUpdate

    3. componentWillReceiveProps

    新增的方法:

    1. getDerivedStateFromProps

    2. getSnapshotBeforeUpdate


    查看全部
  • npm intellisense : 在import 时自动补全npm modules

    path intellisense: 补全文件名

    Prettier: 代码格式化

    Reactjs code snippets: 代码片段

    查看全部
    0 采集 收起 来源:课程简介

    2018-12-19

  • 样式文件。。。。。。。。。。。。。。

    查看全部
    1 采集 收起 来源:订单项组件

    2018-12-04

  • questionid

    213

    查看全部
    0 采集 收起 来源:课程简介

    2018-11-14

  • ?
    查看全部
  • 骷髅头
    查看全部
首页上一页123下一页尾页

举报

0/150
提交
取消
课程须知
了解基本的React知识
老师告诉你能学到什么?
1、create-react-app脚手架的使用 2、React项目开发流程 3、组件划分方法 4、组件间的通讯 5、列表渲染 6、组件事件处理 7、React项目中的数据请求

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!