購物車框架效果圖

# 1. Props 
  1.1  Props/列表渲染/條件渲染 
  什麼是Props?
    當React元素作為自定義元件,將JSX所接受的屬性轉換為單個物件傳遞給元件,這個物件被稱為"Props"
    父元件傳給子元件引數物件(屬性)
    Props是元件固有屬性
    子元件內部不可以對Props進行修改
    更新Props時,需要通過父元件重新傳入新的props,更新子元件.
  React是一個單向資料流
  建立元件 class PropListItem extends Component 
  接受父元件傳遞的Props
  constructor(props) {
    super(props);
    // 如果不寫下面這句會報警告
    this.state = {};
  }
# 函式元件
 ListItemFun.jsx
 1. sfc 快捷方式 無狀態元件
 2. 函式元件是沒有this關鍵字的
 3. 不管是函式元件/還是類元件都會通過babel來轉換成瀏覽器可以執行的程式碼
 4. props 是通過函式的引數傳遞過來的
 5. 沒有生命週期
 優點 輕量 沒有狀態時可以使用
# 類元件
  ListItem.jsx
  建立元件 class PropListItem extends Component 稱為類元件
# 列表渲染
  js表示式來實現列表渲染
  Arr.map(function (item) {
    return _
  }) 
 map方法會生成一個新的陣列, 列表渲染需要為每一項設定key
 
 {
   dataList.map( item => {
    return <PropListItem key={item.id} data={item}/>
    })
 }
# 條件渲染
 vue v-if
 react 
 1. 三目運算子
  <div className={`item-col item-col-count${count < 1 ? '' : '-s' }`}>{count}</div>
 2. 使用函式條件作判斷
  // 通過函式方式來作條件渲染
    renderList () {
      if (dataList.length === 0) {
        return <div className="text-center">購物車是空的</div>
      }
      return dataList.map( item => {
        return <PropListItem key={item.id} data={item}/>
      })
    }
  render() {
    return (
      {
        this.renderList()
      }
    )
  }
 3. 使用與運算子 && 判斷
  {dataList.length === 0 && <div className="text-center">購物車是空的</div> }

　　關鍵程式碼如下:

app.js 函式元件

import './App.css';
import PropsList from './Props/List'

function App() {
  return (
    <div className="App">
      <PropsList />
    </div>
  );
}

export default App;

PropsList 元件 類元件

import React, { Component } from 'react'
import PropListItem from './ListItem' // 類元件
// import PropListItem from './ListItemFun'  // 函式元件
const dataList = [
  {
    id: 1,
    name: '筆記本1',
    price: 4500,
    stock: 12
  },
  {
    id: 2,
    name: '筆記本2',
    price: 14500,
    stock: 4
  },
  {
    id: 3,
    name: '筆記本3',
    price: 7800,
    stock: 122
  }
]

class PropsList extends Component {
  // 通過函式方式來作條件渲染
renderList () {
  if (dataList.length === 0) {
    return <div className="text-center">購物車是空的</div>
  }
  return dataList.map( item => {
    return <PropListItem key={item.id} data={item}/>
  })
}
  render() {
    return(
      <div className="container">
        {/* {dataList.length === 0 && <div className="text-center">購物車是空的</div> } */}
        {/* <PropListItem data={dataList[0]}/>
        <PropListItem data={dataList[1]}/>
        <PropListItem data={dataList[2]}/> */
          this.renderList()
        }

      </div>
    )
  }
}
export default PropsList

ListItem 元件 類元件

import React, { Component } from 'react'
import './list.css'
let count = 0
class PropListItem extends Component {

  constructor(props) {
    super(props);
    // 如果不寫下面這句會報警告
    this.state = {};
  }

  render () {
    let data = this.props.data
    return (
      <div className="item-row">
        <div className="item-col">{data.name}</div>
        <div className="item-col">{data.price}</div>
        {/* 三目運算子來作條件判斷 */}
        <div className={`item-col item-col-count${count < 1 ? '' : '-s' }`}>{count}</div>
      </div>
    )
  }
}
export default PropListItem

ListItem 元件 函式元件 只用來測試,只要程式碼還是參考上面的類元件

import React from 'react'
import './list.css'
let count = 0
const ListItem = (props) => {
  return (
    <div className="item-row">
    <div className="item-col">{props.data.name}</div>
    <div className="item-col">{props.data.price}</div>
    <div className="item-col">{count}</div>
  </div>
  )
}
export default ListItem

　list.css

.item-row {
  margin-top: 20px;
  display: flex;
}
.item-col {
  width: 100px;
  height: 30px;
  border: 1px solid #000000;
}
.item-col-count {
  background-color: #ffffff;
}
.item-col-count-s {
  background-color: red;
}