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

轉載于:https://www.cnblogs.com/sansancn/p/11160784.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的react-json渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。