react 组件列表

let data=[
    [
        '同时入选IMDB250和豆瓣电影250的电影',
        '带你进入不正常的世界',
        '用电【影】来祭奠逝去的岁月',
        '女孩们的故事【电影】',
        '',
        '使用 App 【找电影】功能',
        '科幻是未来的钥匙——科幻启示录【科幻题材】',
        '美国生活面面观',
        '2015终极期待',
        '经典韩国电影——收集100部'
    ],
    [
        '经典',
        '冷门佳片',
        '豆瓣高分',
        '动作',
        '喜剧',
        '爱情',
        '悬疑',
        '恐怖',
        '科幻',
        '治愈',
        '文艺',
        '成长',
        '动画',
        '华语',
        '欧美',
        '韩国',
        '日本'
    ],
    [
     '小波看书',
     '村上春树周边',
     '我凭名字认定了你',
     '不可饶恕的女人',
     '',
     '爱欲书',
     '他们还写侦探小说',
     '人生识字忧患',
     '诗歌书店'
    ],
    [
        '小说',
        '爱情',
        '历史',
        '外国文学',
        '青春',
        '励志',
        '随笔',
        '传记',
        '推理',
        '旅行',
        '奇幻',
        '经营'
    ]
]

export default data;
//数据类型

import React from 'react';
import './typelist.scss';
class table extends React.Component{
    render(){
        return (
            <ul className='table'>
               {
                this.props.table.map((item,index)=>{
                    return (
                        <li key={index}>
                            {item}
                            <span> </span>
                        </li>
                    )
                })
               }
            </ul>
        )
    }
}
export default table;

.table{
    margin-left: .94rem;
    list-style: none !important;
    padding: 1.12rem 0 1.88rem;
    color: #eee;
    font-size: .7rem;
    overflow: hidden;
    width: 100%;
    // border-bottom: 1px solid #ccc;
    li{
    width:  39%;
    border-top: solid 1px #eee;
    border-right: solid 1px #eee;
    float: left;
    padding-right: 1.12rem;
    height: 2rem;
    display: list-item;
    color: #42bd56;
    line-height: 2rem;
    margin-left:0;//修改
    padding-left: .3rem;
    }
    li:nth-child(16){
        border-bottom: 1px solid #eee;
    }
    span{
    color: #ccc;
    float: right;
    font-weight: bold;
    display: inline-block;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    width: .4rem;
    height: .4rem;
    transform: rotate(-45deg);
    margin-top: 1rem;
    }
}

滚动列表封装

import React from 'react';
import './list.scss';
class MyList extends React.Component{
    render(){
        return (
            <div id='mylist'>
                <ul className='Comlist'>
                {
                    this.props.data.map((item,index)=>{
                        return <li key={index}>
                                    {item}
                                </li>
                    })
                }
                </ul>
            <div className='line'>
            </div>
            </div>
         
        )
    }
}

export default MyList;

#mylist{
    position: relative;
    .Comlist{
        padding: 15px 15px 25px 15px;
        li{
            height: 50px;
            line-height: 50px;
            padding: 0 1.55rem;
            letter-spacing: .1em;
            overflow: auto;
            display: block;
            text-align: center;
            margin: 0 0 8px 8px;
            font-size: .94rem;
            display: inline-block;
            border-radius: .25rem;
            border: solid 1px;
            vertical-align: middle;
            width: initial;
        }
        li:first-child{
            color: #FF4055;
            border-color: #FF4055;
        }
        li:nth-child(2){
            color: #3BA94D;
            border-color:#3BA94D;
        }
        li:nth-child(3){
            color: #3BA94D;
            border-color:#3BA94D;
        }
        li:nth-child(4){
            color: #FFAC2D;
            border-color:#FFAC2D;
        }
        li:nth-child(5){
            width: 100%;
            display: block;
            height: 1px;
            border: 0;
            margin: 0;  
        }
        li:nth-child(6){
            color: #3BA94D;
            border-color:#3BA94D;
        }
        li:nth-child(7){
            color: #FFAC2D;
            border-color: #FFAC2D;
        }
        li:nth-child(8){
            color: #2384E8;
            border-color:#2384E8;
        }
        li:nth-child(9){
            color: #2384E8;
            border-color:#2384E8;
        }
        li:nth-child(10){
            color: #CC3344;
            border-color: #CC3344;
        }
    }
    .line{
        border:none;
        border-bottom: 3px solid #fff;
        position: absolute;
        bottom: 4px;
        width: 100%;
    }
}