<!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. May 27. 2018 Week 22nd Sunday

    All things come to those who wait. 苍天不负有心人. It is said that those who are patient can see what their ...

  2. Markdown编辑器开发记录（二）：Markdown编辑器的使用与开发入门

    Markdown编辑器的使用与开发入门 在部门做技术分享的时候简单整理了一下手里的资料 1 是什么 1.1 Markdown是一种轻量级标记语言 Markdown是一种轻量级标记语言,创始人为约翰·格 ...

  3. Node爬虫之初体验

    记得之前就听说过爬虫,个人初步理解就是从网页中抓取一些有用的数据,存储到本地,今天就当是小牛试刀,拿来溜溜...... 实现需求: 抓取课程数据,输入url后并在浏览器端以一定的数据格式显示出来(如下 ...

  4. Go学习笔记07-结构体与方法

    Go学习笔记07-结构体与方法 Go语言 面向对象 结构的定义与创建 面向对象 Go语言只支持封装,不支持继承和多态. Go语言中只有struct,即结构体:没有class. 结构的定义与创建 pac ...

  5. 设计模式のTemplatePattern（模板模式）----行为模式

    一.产生背景 在程序设计中,可能每个对象都有共同的地方,而此时如果每个对象定义一次,如下例子,每个对象都写Stay()方法,这样在每个类中都有很多相同的代码,此时,我们需要用到模板设计模式,来解决这个 ...

  6. Leetcode：0027

    Leetcode:0027 题目:给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度.不要使用额外的数组空间,你必须在原地修改输入数组并在使用 ...

  7. 006_饿了么大前端总监sofish帮你理清前端工程师及大前端团队的成长问题！

    作者|Sofish编辑|小智 & 尾尾本文是前端之巅向 sofish 的约稿<什么样的人可以称为架构师?>.采访< 饿了么大前端团队究竟是如何落地和管理的?>以及 so ...

  8. 关于CentOS7下docker-ce无法删除镜像的问题

    未完待续.... 从旧版的docker删除后安装了新版的docker-ce 发现之前镜像无法删除,并且重新pull不能覆盖,会出现两个一模一样的镜像. [root@localhost ~]# dock ...

  9. 高精度除法（b为int类型）

    #include<iostream> #include<cstring> #include<cstdio> using namespace std; ],a[],b ...

  10. 通过 JS 脚本去除csdn广告

    1. chorme 浏览器 1.1 通过书签方式添加 新建书签: 在网址一栏中输入: javascript: $(function () { $('aside .csdn-tracking-stati ...