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 => (
<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}>性质</div>
<div className={styles.options}>
{optionsList}
</div>
</div>
)
}
export default Filter
页面组件
Props
- history: 用于改变路由
Action
- fetchCoursewareList
- 参数：选项对应的id, 仅当不为-1时
- 返回值：课件列表相关数据, 用于渲染页面
componentWillReceiveProps
属性改变时会自动触发该函数，需比较当路由不同时，调用fetchCoursewareList Action。
