在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(

)

}

}

// 渲染dom

ReactDom.render(

,

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