歌手列表1:横向分类列表开发，搞定诸多类似场景|云音乐项目

本节代码对应 GitHub 分支: chapter4

本节最终效果如下所示:

# 接受参数

在 baseUI 文件夹下新建 horizen-item 目录，接着新建 index.js。

首先分析这个基础组件接受哪些参数，

import React, { useState, useRef, useEffect, memo } from 'react';
import styled from'styled-components';
import Scroll from '../scroll/index'
import { PropTypes } from 'prop-types';
import style from '../../assets/global-style';

function Horizen (props) {
  return (
    // 暂时省略
  )
}

// 首先考虑接受的参数
//list 为接受的列表数据
//oldVal 为当前的 item 值
//title 为列表左边的标题
//handleClick 为点击不同的 item 执行的方法
Horizen.defaultProps = {
  list: [],
  oldVal: '',
  title: '',
  handleClick: null
};

Horizen.propTypes = {
  list: PropTypes.array,
  oldVal: PropTypes.string,
  title: PropTypes.string,
  handleClick: PropTypes.func
};
export default memo (Horizen);

@前端进阶之旅: 代码已经复制到剪贴板

现在，来把 props 对象进行解构赋值，

const { list, oldVal, title } = props;
const { handleClick } = props;

@前端进阶之旅: 代码已经复制到剪贴板

返回的 JSX 代码为:

return (
  <Scroll direction={"horizental"}>
    <div>
      <List>
        <span>{title}</span>
        {
          list.map ((item) => {
            return (
              <ListItem
                key={item.key}
                className={`${oldVal === item.key ? 'selected': ''}`}
                onClick={() => handleClick (item.key)}>
                  {item.name}
              </ListItem>
            )
          })
        }
      </List>
    </div>
  </Scroll>
);

@前端进阶之旅: 代码已经复制到剪贴板

样式代码:

// 由于基础组件样式较少，直接写在 index.js 中
const List = styled.div`
  display: flex;
  align-items: center;
  height: 30px;
  overflow: hidden;
  >span:first-of-type {
    display: block;
    flex: 0 0 auto;
    padding: 5px 0;
    margin-right: 5px;
    color: grey;
    font-size: ${style ["font-size-m"]};
    vertical-align: middle;
  }
`
const ListItem = styled.span`
  flex: 0 0 auto;
  font-size: ${style ["font-size-m"]};
  padding: 5px 8px;
  border-radius: 10px;
  &.selected {
    color: ${style ["theme-color"]};
    border: 1px solid ${style ["theme-color"]};
    opacity: 0.8;
  }
`