react-json渲染

在js文件內

//定義react組件
import React from 'react';
import ReactDom from 'react-dom'
import './components/assets/taobao.css'

class TaoBao extends React.Component{
    state={
        list:[
            {
                title:'女裝',
                href:'javescript:;',
                hot:false,
                child:[
                    {title:'襯衫',href:'javescript:;',hot:false},
                    {title:'雪紡衫',href:'javescript:;',hot:true},
                    {title:'防曬衣',href:'javescript:;',hot:false}
                ]
                },
                {
                title:'連衣裙',
                href:'javescript:;',
                hot:true,
                child:[
                    {title:'雪紡裙',href:'javescript:;',hot:false},
                    {title:'長裙',href:'javescript:;',hot:false}
                ]
                },
                {
                title:'T恤',
                href:'javescript:;',
                hot:false,
                child:[
                    {title:'打底衫',href:'javescript:;',hot:false},
                    {title:'短袖T',href:'javescript:;',hot:true},
                    {title:'蝙蝠袖',href:'javescript:;',hot:false}
                ]
                },
                {
                title:'褲子',
                href:'javescript:;',
                hot:false,
                last:true,
                child:[
                    {title:'小腳褲',href:'javescript:;',hot:false},
                    {title:'連體褲',href:'javescript:;',hot:false},
                    {title:'短褲',href:'javescript:;',hot:true}
                ]
                },
                {
                title:'男裝',
                href:'javescript:;',
                hot:false,
                child:[
                    {title:'新品',href:'javescript:;',hot:true},
                    {title:'風格',href:'javescript:;',hot:false},
                    {title:'潮牌',href:'javescript:;',hot:false},
                    {title:'品牌特惠',href:'javescript:;',hot:false}
                ]
                },
                {
                title:'T恤',
                href:'javescript:;',
                hot:true,
                child:[
                    {title:'短袖',href:'javescript:;',hot:false},
                    {title:'純棉',href:'javescript:;',hot:false},
                    {title:'簡約',href:'javescript:;',hot:false},
                    {title:'印花',href:'javescript:;',hot:false}
                ]
                },
                {
                title:'襯衫',
                href:'javescript:;',
                hot:false,
                child:[
                    {title:'短袖衫',href:'javescript:;',hot:false},
                    {title:'格子',href:'javescript:;',hot:false},
                    {title:'純色',href:'javescript:;',hot:false},
                    {title:'修身',href:'javescript:;',hot:true}
                ]
                },
                {
                title:'休閑褲',
                href:'javescript:;',
                hot:false,
                child:[
                    {title:'短褲',href:'javescript:;',hot:true},
                    {title:'小腳',href:'javescript:;',hot:false},
                    {title:'直筒',href:'javescript:;',hot:false}
                ]
                }
            ]
        
        };
        render(){
            console.log(this.state.list)
            return(
                <div>
                    <ul id="ul1">{
                        this.state.list.map((item,index)=>(
                            <li key={index} className={`${item.last?'last':''}`}>{item.title}
                                <a href={item.href} className={`title ${item.hot?'hot':''}`}>{item.title}</a>
                                {item.child&&item.child.map((item,index)=>(
                                    <a href={item.href} key={index} className={`title ${item.hot?'hot':''}`}
                                    >{item.title}</a>
                                ))}
                            </li>
                        ))
                    }</ul>
                </div>
            )
        }
    }

// 渲染dom
ReactDom.render(
    <TaoBao />
    ,
    document.querySelector('#root')
);

// export default TaoBao

在css內

*{ margin:0; padding:0; list-style:none; font-family: "微軟雅黑","張海山銳線體簡"}
#ul1{padding-left:115px;width:240px;margin:50px auto;border:1px solid #E7E7EF;border-left:0;}
li{height:30px;width:210px}
a{text-decoration:none;color:#000;padding-right:12px;line-height:30px;}
a:hover{color:#F75210;}
.title{font-weight:bold;font-size:14px;}
.child{font-size:12px;}
.hot{color:#F75210;}
.last{border-bottom:1px solid #E7E7EF;}