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:'衬衫',hot:false},{title:'雪纺衫',hot:true},{title:'防晒衣',hot:false}
                ]
                },{
                title:'连衣裙',hot:true,child:[
                    {title:'雪纺裙',{title:'长裙',{
                title:'T恤',child:[
                    {title:'打底衫',{title:'短袖T',{title:'蝙蝠袖',{
                title:'裤子',last:true,child:[
                    {title:'小脚裤',{title:'连体裤',{title:'短裤',hot:true}
                ]
                },{
                title:'男装',child:[
                    {title:'新品',{title:'风格',{title:'潮牌',{title:'品牌特惠',child:[
                    {title:'短袖',{title:'纯棉',{title:'简约',{title:'印花',{
                title:'衬衫',child:[
                    {title:'短袖衫',{title:'格子',{title:'纯色',{title:'修身',{
                title:'休闲裤',child:[
                    {title:'短裤',{title:'小脚',{title:'直筒',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;}