这个简单的demo,功能是这样的:

index.js:

import React from 'react';import ReactDOM from 'react-dom';import Books from './Books';import '../node_modules/bootstrap/dist/css/bootstrap.min.css';import './styles/index.css';ReactDOM.render(  
    ,  document.getElementById('root'));

Books.js:

import React, { Component } from 'react';import BookList from './BookList';import BookDetail from './BookDetail';import Car from './Car';class Books extends Component {  constructor() {    super()    this.handleListClick = this.handleListClick.bind(this);    this.handleAddToCar = this.handleAddToCar.bind(this);    this.state = {      currentBook: null,      car: [],      totalNum: 0,      total: 0    };  }  handleListClick(book) {    this.setState({      currentBook: book    });  }  handleAddToCar(currentBook) {    let totalNum = this.state.totalNum;    let car = this.state.car;    let total = this.state.total;    let exist = false;    if (car.length) {      car.forEach(book => {        if (book.id === currentBook.id) {          book.number += 1;          totalNum += 1;          exist = true;          this.setState({            totalNum          });        }      });    }    if (!exist) {      car = car.concat(Object.assign({}, currentBook, {number:1}));      totalNum += 1;      this.setState({          car,          totalNum      });     }    total = car.map(book => (book.price * book.number)).reduce((prev, cur) => prev + cur);    this.setState({      total    });  }  render() {    return (      
    
        
             
              
             
      
     
    
    );  }}Books.defaultProps = {    books: [    {      id: 1,      category: 'CSS',      title: 'CSS权威指南',      author: 'Eric A. Meyer',      price: 42    },    {      id: 2,      category: 'JS',      title: 'JavaScript高级程序设计',      author: 'Nicholas C.Zakas',      price: 69    },    {      id: 3,      category: 'CSS',      title: '精通CSS:高级Web标准解决方案',      author: '巴德,科利森,莫尔',      price: 25    }  ]};export default Books;

BookList.js:

import React from 'react';const BookList = ({books, listClick}) => {  return (    
    
      
     
图书列表
        
     
                {books.map((book) => {            return (              
      
 listClick(book)}>                {book.title}              
            )                      })}        
     
    
    
  );};export default BookList;

BookDetail.js

import React from 'react';const Bookdetail = ({currentBook, addToCar}) => {  if (!currentBook) return 
    
     
选择图书
    
  return (    
    
      
     
图书详情
      
     
{currentBook.title}
      
     
作者:{currentBook.author}
      
     
价格:{currentBook.price}
      
     
编号:{currentBook.id}
      
      addToCar(currentBook)}>        放进购物车          
    
  );};export default Bookdetail;

Car.js:

import React from 'react';const Car = ({car, totalNum, total}) => {  let result = car.length ? 
共{totalNum}本 总价为{total}
: 
购物车为空
;  return (    
    
      
     
购物车
      
     
              {          car.map((book, index) => {            return 
      
              {book.title} 价格为: {book.price} 已选择{book.number}本            
          })        }      
     
      {result}    
    
  );};export default Car;