react进阶—01数据展示

￡神魔★判官ぃ 2022-03-17 12:38 229阅读 0赞

### 1.react初始 ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
    
    <div id="app"></div>
    <script type="text/babel">
    ReactDOM.render(
    	<h1>Hello, world!</h1>,
    	document.getElementById('app')
    );
    </script>
    
    </body>
    </html>

引入组件Penel

插值表达式

### 2.示例 ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>My React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="./data.js"></script>
    <style>
        .penel{
            border: 1px solid #000;
            width: 80%;
        }
        .title{
            margin:0;
            padding: 10px;
            background: #ccc;
        }
        p.vip{
            color:red;
        }
        p.message{
            color:#aaa;
        }
    </style>
    
    </head>
    <body>
    
    <div id="app"></div>
    <script type="text/babel">
        class List extends React.Component{
            render(){
                return (<ul>
                    {this.props.list.map(function(val,index){
                        return (
                            <li key={index}>
                                <p className="vip">{val.username}</p>
                                <p className="message">{val.message}</p>
                            </li>
                        )
                    })}
                </ul>)
    
            }
        }
    
        class Item extends React.Component{
            render(){
                console.log(this.props);
                return(<div>
                        <h2 className="title">{this.props.data.name}</h2>
                        <List list={this.props.data.list} />
                    </div>)
            }
        }
    
        class Penel extends React.Component {
            setShow(){
                var list = Object.keys(dataList).map(function(val,index){
                    return <Item data={dataList[val]} key={index}/>
                });
                return list
            }
            render(){
                return (
                    <div className="penel">
                        {this.setShow()}
                    </div>
                );
            }
        }
        ReactDOM.render(
            <Penel />,
            document.getElementById('app')
        );
    </script>
    
    </body>
    </html>

### data.js ###

let dataList = {
        friends:{
            name: '朋友',
            list:[
                {username: '九华彩', message: '什么叫人脉0',vip:true},
                {username: '客如意', message: '什么叫人脉0',vip:false},
                {username: '紫文丽', message: '什么叫人脉0',vip:false},
                {username: '程正思', message: '什么叫人脉0',vip:true}
            ]
        },
        families:{
            name: '家人',
            list:[
                {username: '九华彩1', message: '什么叫人脉1',vip:true},
                {username: '客如意1', message: '什么叫人脉1',vip:false},
                {username: '紫文丽1', message: '什么叫人脉1',vip:false},
                {username: '程正思1', message: '什么叫人脉1',vip:true}
            ]
        },
        colleagues:{
            name: '同事',
            list:[
                {username: '九华彩2', message: '什么叫人脉2',vip:true},
                {username: '客如意2', message: '什么叫人脉2',vip:false},
                {username: '紫文丽2', message: '什么叫人脉2',vip:false},
                {username: '程正思2', message: '什么叫人脉2',vip:true}
            ]
        },
    }

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220317/770a515b81214363bfcb9447e32afce6.png