React-Props 一/列表渲染/条件渲染

购物车框架效果图

 

# 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;
}