1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="../node_modules/react/umd/react.development.js"></script>
  9.     <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
  10.     <script src="../node_modules/babel-standalone/babel.js"></script>
  11. </head>
  12. <body>
  13.     <div id="app"></div>
  14.     <script src="./db.js"></script>
  15.     <script type="text/babel">
  16.     class Item extends React.Component{
  17.         constructor(props){
  18.             super(props);
  19.         };
  20.         render(){
  21.             let {myitem,arr} = this.props;
  22.             console.log( myitem,arr)
  23.             return(
  24.                <div>
  25.                    {
  26.                        arr.map((val,index)=>{ //遍历数组 拿到myitem的key值 然后将 myitem[val]这个数组进行遍历
  27.                           return <div key={index}>
  28.                                     {myitem[val].map((v)=>{
  29.                                         return <div key={v.id}> //v是json数据 object.keys遍历拿到key值数组进行遍历 将里面的json解开 拿到子数组进行遍历和渲染
  30.                                                   {Object.keys(v).map((it,ind)=>{
  31.                                                       return <div key={ind}>
  32.                                                              {it}:{v[it]}
  33.                                                             </div>
  34.                                                   })}
  35.                                                 </div>
  36.                                     })}
  37.                                 </div>
  38.                        })
  39.                    }
  40.                 </div>
  41.             )
  42.         }
  43.     }
  44.     class List extends React.Component{
  45.         constructor(props){
  46.             super(props);
  47.         };
  48.        render(){
  49.            let {item} = this.props;
  50.            return <div>
  51.                     { Object.keys(item)} //遍历json外层
  52.                     <Item myitem={item} arr={Object.keys(item)}/> //传json和遍历的key的数组给子组件
  53.                   </div>
  54.        }
  55.     }
  56.     class App extends React.Component{
  57.         constructor(props){
  58.             super(props);
  59.             this.state = {
  60.                 data
  61.             }
  62.  
  63.         };
  64.         render(){
  65.             return (
  66.                 <div>
  67.                 <List  item={data}/>  //传数据
  68.                 </div>
  69.             )
  70.         }
  71.     }
  72.         ReactDOM.render(
  73.             <App/>,
  74.             document.getElementById('app')
  75.         )
  76.     </script>
  77. </body>
  78. </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. C3P0连接池温习1

    一.应用程序直接获取数据库连接的缺点 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建10万次连接,极大 ...

  2. 1.tushare模块的应用

    tushare模块的应用 今日概要 TuShare简介和环境安装 TuShare的应用 今日详情 一.TuShare简介和环境安装 TuShare是一个著名的免费.开源的python财经数据接口包.其 ...

  3. ORCFILE IN HDP 2: BETTER COMPRESSION, BETTER PERFORMANCE

    ORCFILE IN HDP 2: BETTER COMPRESSION, BETTER PERFORMANCE by Carter Shanklin   The upcoming Hive 0.12 ...

  4. 百度统计api获取数据

    需求场景 想要了解每天多少人访问了网站,多少个新增用户,地域分布,点击了哪些页面,停留了多久,等等... 国内用的最多的就是百度统计吧,傻瓜式的注册然后插一段代码到项目里就行了. 最近也在自己的博客里 ...

  5. css滚动条样式自定义

    很简单的几行代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. python 之常用模块

    一 认识模块 二 常用模块    (1)re模块    (2)collections模块 一  认识模块     (1)什么是模块      (2)模块的导入和使用 (1)模块是:一个模块就是一个包含 ...

  7. 四、Oracle 序列、常用函数、多表连接

    一.序列定义:是oracle数据库专门用来产生连续且自动增长的数字的对象创建语法:create sequence 序列名(sq_表名) nocache(无缓存) create sequence sq_ ...

  8. python 那些我记不清的函数

    eval 函数:用来计算在字符串中的有效Python表达式,并返回一个对象......将字符串变回数据类型 enumerate函数:加上序号 isinstance函数:判断数据类型 isinstanc ...

  9. 应对WannaCry勒索危机之关闭445端口等危险端口——以本人Windows7系统为例

    应对WannaCry勒索危机之关闭445端口等危险端口--以本人Windows7系统为例 近日,全球范围内爆发WannaCry勒索病毒危机 我国很多大学纷纷中招.受灾严重,甚至连刘老师的电脑也-- 拿 ...

  10. robotframework连接mysql数据库

    1.安装databaselibrary.pymysql 通过cmd命令执行: pip install robotframework-databaselibrary pip install pymysq ...