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%;
    }
}