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