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

转载于:https://www.cnblogs.com/sansancn/p/11160784.html