<!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. CISCO静态路由配置

    静态路由:手动添加路由条目到路由表中 优点:没有额外的路由cpu负担,节约带宽,增加网络安全性. 缺点:必须去了解整个拓扑结构,如果网络拓扑发生变化,需要在所有r路由上手动修改路由表. 实验拓扑如下: ...

  3. [福大软工] Z班 第13次成绩排行榜

    注:本次成绩排行榜是针对华为软件云评测博客 作业要求 http://www.cnblogs.com/easteast/p/7772637.html 评分细则 (1)寻找软件的bug,功能的评测与黑箱测 ...

  4. JDBC复习1

    1.什么是JDBC JDBC是java数据库连接技术的简称(Java DataBase Connectivity) jdbc是接口,jdbc驱动才是接口的实现,负责连接各种不同的数据库.jdbc的AP ...

  5. 【Teradata】gtwglobal查看

    使用root登录TD数据库节点 cnsterm 6 start gtwglobal cnsterm 3 //上一个命令的window编号 h //帮助 QUIT //退出

  6. UVA1374-Power Calculus(迭代加深搜索)

    Problem UVA1374-Power Calculus Accept:107  Submit:584 Time Limit: 3000 mSec  Problem Description  In ...

  7. 自然语言处理之LDA主题模型

    1.LDA概述 在机器学习领域,LDA是两个常用模型的简称:线性判别分析(Linear Discriminant Analysis)和 隐含狄利克雷分布(Latent Dirichlet Alloca ...

  8. 机器学习算法总结(六)——EM算法与高斯混合模型

    极大似然估计是利用已知的样本结果,去反推最有可能(最大概率)导致这样结果的参数值,也就是在给定的观测变量下去估计参数值.然而现实中可能存在这样的问题,除了观测变量之外,还存在着未知的隐变量,因为变量未 ...

  9. 转://【MOS】关于在不同版本和平台之间进行还原或复制的常见问题 (文档 ID 1526162.1)--跨版本恢复

    Questions and Answers 1) 我能用更高版本的 Oracle 还原或复制旧版本的数据库吗? 2) 我能在两个不同的补丁程序集之间进行还原或复制吗? 3) 我能在同一操作系统的不同版 ...

  10. No.3

    1.查看httpd进程数(即prefork模式下Apache能够处理的并发请求数): ps -ef | grep httpd | wc -l 返回结果示例: 1388 表示Apache能够处理1388 ...