实现列表的渲染

新建一个Shoppingcar.js 在里面写入代码

import React, { Component } from 'react'
import "./shoppingcar.css"

export default class Shoppingcar extends Component {
    constructor(props){
        super(props);
        this.state={
            list:[
                {id:1,goodsname:"商品一",goodsnum:100,goodsprice:2,checked:false},
                {id:2,goodsname:"商品二",goodsnum:200,goodsprice:10,checked:false},
                {id:3,goodsname:"商品三",goodsnum:1,goodsprice:5,checked:false}
            ],
            checkedCount:0,
            total:0,
            allNum:0
        }
    }
    render() {
        var trList = this.state.list.map(item=>
            <ul className="tr" key={item.id}>
            <li>
                <input type="checkbox" checked={item.checked}  onChange={(e)=>{    
                }}/>
            </li>
            <li>{item.goodsname}</li>
            <li>{item.goodsprice}</li>
            <li>
                <button >
                    {item.goodsnum>1?"-":""}
                </button>
                <input value={item.goodsnum} onChange={()=>{}}/>
                 <button>+</button>
            </li>
            <li>{(item.goodsprice* item.goodsnum).toFixed(2)}</li>
            <li onClick={()=>{
            }}>删除</li>
        </ul>  
        )


        return (
            <div className="shoppingcar">
                <ul className="tr">
                    <li>
                        <input type="checkbox" ref="checkAll" onChange={(e)=>{
                        }}/> 全选
                    </li>
                    <li>商品名称</li>
                    <li>商品价格</li>
                    <li>商品数量</li>
                    <li>商品小计</li>
                    <li>操作</li>
                </ul>   
                {trList}
                <ul className="tr">
                    <li>总数为:{this.state.allNum}</li>
                    <li>金额为:{this.state.total}</li> 
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        )
    }
}

第二步写入需要的样式  shoppingcar.css

*{
    margin:0;
    padding: 0;
    list-style: none;
}
.shoppingcar{
    width: 600px;
    overflow: hidden;
    margin: 50px auto;
}
.shoppingcar .tr{
    width: 600px;
    height: 30px;
}
.shoppingcar .tr li{
    float: left;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: black;
    color: aliceblue;
}
.shoppingcar .tr li  input{
    width: 50px;
}

3:运行效果

4:针对js中代码进行解释