UI 稿

功能描述

• 默認(rèn)選中全部，即獲取全部列表數(shù)據(jù)。當(dāng)點(diǎn)擊“通識(shí)類”或“實(shí)訓(xùn)類”按鈕時(shí)，切換選中選項(xiàng)，改變路由，并重新獲取列表數(shù)據(jù)。

API

• 全部、通識(shí)類、實(shí)訓(xùn)類分別用id 表示為 -1，1，2
• 默認(rèn)不帶查詢參數(shù)時(shí)會(huì)獲取全部數(shù)據(jù)列表
• 當(dāng)選擇實(shí)訓(xùn)或通識(shí)時(shí)，傳入對(duì)應(yīng)的id, 如 /api/courseware/list?propertyId=id

Component: Filter

Props

• options: [{id: -1, title:"全部”}，{id: 1, title: "通識(shí)類“}，{id: 2, title: "實(shí)訓(xùn)類”}], 用于渲染篩選項(xiàng)文字和給每個(gè)選項(xiàng)綁定id
• currentId: 當(dāng)屬性不存在時(shí)，默認(rèn)為“-1"
• handleChange: 當(dāng)篩選按鈕被點(diǎn)擊時(shí)調(diào)用，傳遞 id 作為參數(shù)

代碼

import React from 'react'
import cx from 'classnames'
import styles from './Filter.scss'

const Filter = ({ options, currentId, handleChange }) => {
  const optionsList = options.map(item => (
    <button
      key={item.id}
      className={cx(styles.item, {
        [styles.active]: item.id === currentId,
      })}
      onClick={() => {
        handleChange(item.id)
      }}
    >
      {item.name}
    </button>
  ))

  return (
    <div className={styles.root}>
      <div className={styles.title}>性質(zhì)</div>
      <div className={styles.options}>
        {optionsList}
      </div>
    </div>
  )
}

export default Filter

頁(yè)面組件

Props

• history: 用于改變路由

Action

• fetchCoursewareList
  • 參數(shù)：選項(xiàng)對(duì)應(yīng)的id, 僅當(dāng)不為-1時(shí)
  • 返回值：課件列表相關(guān)數(shù)據(jù), 用于渲染頁(yè)面

componentWillReceiveProps

屬性改變時(shí)會(huì)自動(dòng)觸發(fā)該函數(shù)，需比較當(dāng)路由不同時(shí)，調(diào)用fetchCoursewareList Action。