<!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单组件 渲染页面的更多相关文章

  1. ReactJS实用技巧（2）：从新人大坑——表单组件来看State

    不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...

  2. 如何实现Ant design表单组件封装？

    目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...

  3. reactjs入门到实战（八）----表单组件的使用

    表单组件支持几个受用户交互影响的属性: value,用于 <input>.<textarea> 组件. checked,用于类型为 checkbox 或者 radio 的 &l ...

  4. django基础之day09，创建一个forms表单组件进行表单校验，知识点：error_messages，label，required，invalid，局部钩子函数，全局钩子函数， forms_obj.cleaned_data，forms_obj.errors，locals()， {{ forms.label }}:{{ forms }}，{{ forms.errors.0 }}

    利用forms表单组件进行表单校验,完成用户名,密码,确认密码,邮箱功能的校验 该作业包含了下面的知识点: error_messages,label,required,invalid,局部钩子函数,全 ...

  5. React服务端渲染总结

    欢迎吐槽 : ) 本demo地址( 前端库React+mobx+ReactRouter ):https://github.com/Penggggg/react-ssr.本文为笔者自学总结,有错误的地方 ...

  6. react服务端渲染（同构）

    学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对re ...

  7. 使用webpack、babel、react、antdesign配置单页面应用开发环境

    这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  8. （十分钟视频教程）nodejs基础实战教程3：react服务端渲染入门篇

    视频截图如下: (具体视频见文末) 前言: 这是小猫的第三篇node教程,本篇内容是由公众号粉丝票选得出的,相信大家对这篇教程是抱有较大希望的,这篇教程由小猫和一位多年的好朋友合作完成(笔名:谷雨,博 ...

  9. React 避免重渲染

    组件的重新渲染 我们可以在 React 组件中的 props 和 state 存放任何类型的数据,通过改变 props 和 state,去控制整个组件的状态.当 props 和 state 发生变化时 ...

随机推荐

  1. Unity Shader 基础（3） 获取深度纹理

    Unity提供了很多Image Effect效果,包含Global Fog.DOF.Boom.Blur.Edge Detection等等,这些效果里面都会使用到摄像机深度或者根据深度还原世界坐标实现各 ...

  2. static 关键字和类的加载顺序

      静态变量在类加载时初始化,而非静态变量在创建对象时初始化.static关键字修饰的变量就是静态变量. 子类继承父类,子类在生成对象的时候,先初始化父类的成员变量,接着执行父类的构造器,完成父类的初 ...

  3. 浅析SQLite的锁机制和WAL技术

    锁机制 SQLite基于锁来实现并发控制.SQLite的锁是粗粒度的,并不拥有PostgreSQL那样细粒度的行锁,这也使得SQLite较为轻量级.当一个连接要写数据库时,所有其它的连接都被锁住,直到 ...

  4. RPC通信原理(未完，先睡觉)

    一 背景 OpenStack 各组件之间是通过 REST 接口进行相互通信,比如Nova.Cinder.Neutron.Glance直间的通信都是通过keystone获取目标的endpoint,即ap ...

  5. .net ElasticSearch-Sql 扩展类【原创】

    官方提供的是java sdk,并支持jdbc方式的查询结果输出;但是却没有.net sdk的支持. 开发 ElasticSearch-Sql 第三方开源项目的.net sdk,未来集成入bsf框架.( ...

  6. UVA10256 The Great Divide

    怎么又没人写题解,那我来贡献一发好了. 题目意思很简单,平面上有两种颜色的点,问你能否求出一条直线使两种颜色的点完全分开. 首先我们考虑两个点集相离的充要条件,这两个点集的凸包必须相离.(很好证明或者 ...

  7. flask使用原生ajax、不使用表单(Form)上传文件

    〇.知识点 jquery ajax 文档告诉你可以使用默认的 application/x-www-form-urlencoded, multipart/form-data, or text/plain ...

  8. Spring MVC自定义403,404,500状态码返回页面

    代码 HTTP状态码干货:http://tool.oschina.net/commons?type=5 import org.springframework.boot.web.servlet.erro ...

  9. 高并发下的Id生成器

    考虑到sql server以及c#,最多只能用decimal类型,也就是29位的数字,做了下面这个数字型id生成器: class Program { static void Main(string[] ...

  10. Docker for .Net Developers（part1：Docker基本概念介绍）

    一.什么是Docker 目前,.Net 社区中很可能会用到的两个词是“微服务”和“Docker”. 这两个主题都非常引人注目,并为开发人员和架构师带来兴奋之情. 在这个新系列的博客文章中,我把自己最近 ...