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

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

难度中级
时长 1小时44分
学习人数
综合评分9.50
25人评价 查看评价
9.6 内容实用
9.4 简洁易懂
9.5 逻辑清晰
  • /*我的css简洁一些,效果一样*/

    .orderItem{width: 100%;height: 30vw;margin: 5px auto;}

    .orderItem__pic{width: 100%;height: 100%;}

    .orderItem__picContainer{width: 30vw;height: 30vw;float: left;}

    .orderItem__content{width: 63vw;/*background: lightblue;*/margin-top:10px;display: inline-block;float: right;}

    .orderItem__product{font-weight: 700;font-size: 17px;line-height: 30px;}

    .orderItem__shop{color: #777;line-height: 30px;text-overflow: ellipsis;white-space: nowrap;}

    .orderItem__price{color: #777;float: left;line-height: 30px;}

    .orderItem__price::before{content: '¥';}

    .orderItem__btn{color: white;background: lightgray;float: right;width: 80px;height: 22px;border: 0;}

    .orderItem__btn--red{background-color: #e9203d}

    .orderItem__btn--grey{background-color: #999}


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

    2020-03-22

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

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

    2018-12-04

  • git源码 https://gitee.com/jiangjiesheng/react-demo-orderlist
    查看全部
    1 采集 收起 来源:课程总结

    2018-10-28

  • 安装插件  

     npm intellisense

    Path intellisense

    Prettier-code formatter

    Reactjs code snippets

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

    2020-01-14

  • map ...

    查看全部
  • onClick={this.handleClickStars.bind(this, item)}

    给当前点击事件传值(当前项)

    查看全部
  • Props 和 State 的区别

    二者都是数据传递的形式

    前者对外父子组件之间通信

    后者对内负责数据的修改

    查看全部
  • //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


    查看全部
首页上一页12下一页尾页

举报

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

微信扫码,参与3人拼团

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

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