列表页筛选组件设计

UI 稿

功能描述

• 默认选中全部，即获取全部列表数据。当点击“通识类”或“实训类”按钮时，切换选中选项，改变路由，并重新获取列表数据。

API

• 全部、通识类、实训类分别用id 表示为 -1，1，2
• 默认不带查询参数时会获取全部数据列表
• 当选择实训或通识时，传入对应的id, 如 /api/courseware/list?propertyId=id

Component: Filter

Props

• options: [{id: -1, title:"全部”}，{id: 1, title: "通识类“}，{id: 2, title: "实训类”}], 用于渲染筛选项文字和给每个选项绑定id
• currentId: 当属性不存在时，默认为“-1"
• handleChange: 当筛选按钮被点击时调用，传递 id 作为参数

代码

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

const Filter = ({ options, currentId, handleChange }) => {
  const optionsList = options.map(item => (
     {
        handleChange(item.id)
      }}
    >
      {item.name}
    
  ))

  return (
    

      
性质
      

        {optionsList}
      
    
  )
}

export default Filter

页面组件

Props

• history: 用于改变路由

Action

• fetchCoursewareList
  • 参数：选项对应的id, 仅当不为-1时
  • 返回值：课件列表相关数据, 用于渲染页面

componentWillReceiveProps

属性改变时会自动触发该函数，需比较当路由不同时，调用fetchCoursewareList Action。