react 购物车列表页的显示的写法

list.js

import React, { Component } from 'react'

import shoppigcar from "../../css/shoppingcar.module.css";

export default class List extends Component {

    constructor(props){

        super(props);

    }

    render() {

        return (

            <>

                  {this.props.list.map(item => <div key={item.id}>

                    <div className={shoppigcar.item}>

                        <input type='checkbox' checked={item.ischecked} onChange={(e) => {

                            this.props.setCheckAll(item, e.target.checked);

                        }} />

                    </div>

                    <div className={shoppigcar.item}>{item.goodsname}</div>

                    <div className={shoppigcar.item}>{(item.goodsprice * 1).toFixed(2)}</div>

                    <div className={shoppigcar.item}>

                        {item.goodsnum > 1 ? <button onClick={() => {

                            this.props.calc(item, -1);

                        }}>-</button> : ""}

                        <input value={item.goodsnum} onInput={() => {

                        }} />

                        <button onClick={() => {

                            this.props.calc(item, 1);

                        }}>+</button>

                    </div>

                    <div className={shoppigcar.item}>

                        {item.goodsprice * item.goodsnum}

                    </div>

                    <div className={shoppigcar.item} onClick={() => {

                        this.props.del(item.id)

                    }}>删除</div>

                </div>)}

            </>

        )

    }

}