首页 > 其他 > 详细

react单组件 渲染页面

时间:2018-08-11 01:04:46      阅读:56      评论:0      收藏:0      [点我收藏+]

标签:utf-8   meta   html   ini   node   wid   http   ati   arr   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.js"></script>
</head>
<body>
    <div id="app"></div>
    <script src="./db.js"></script>
    <script type="text/babel">
    class Item extends React.Component{
        constructor(props){
            super(props);
        };
        render(){
            let {myitem,arr} = this.props;
            console.log( myitem,arr)
            return(
               <div>
                   {
                       arr.map((val,index)=>{ //遍历数组 拿到myitem的key值 然后将 myitem[val]这个数组进行遍历 
                          return <div key={index}>
                                    {myitem[val].map((v)=>{
                                        return <div key={v.id}> //v是json数据 object.keys遍历拿到key值数组进行遍历 将里面的json解开 拿到子数组进行遍历和渲染
                                                  {Object.keys(v).map((it,ind)=>{
                                                      return <div key={ind}>
                                                             {it}:{v[it]}
                                                            </div>
                                                  })}
                                                </div>
                                    })}
                                </div>
                       })
                   }
                </div>
            )
        }
    }
    class List extends React.Component{
        constructor(props){
            super(props);
        };
       render(){
           let {item} = this.props;
           return <div>
                    { Object.keys(item)} //遍历json外层
                    <Item myitem={item} arr={Object.keys(item)}/> //传json和遍历的key的数组给子组件
                  </div>
       }
    }
    class App extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                data
            }
            
        };
        render(){
            return (
                <div>
                <List  item={data}/>  //传数据  
                </div>
            )
        }
    }
        ReactDOM.render(
            <App/>,
            document.getElementById(‘app‘)
        )
    </script>
</body>
</html>

 

react单组件 渲染页面

标签:utf-8   meta   html   ini   node   wid   http   ati   arr   

原文:https://www.cnblogs.com/l8l8/p/9457791.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号