react单组件 渲染页面
<!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单组件 渲染页面的更多相关文章
- ReactJS实用技巧（2）：从新人大坑——表单组件来看State
不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...
- 如何实现Ant design表单组件封装？
目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...
- reactjs入门到实战（八）----表单组件的使用
表单组件支持几个受用户交互影响的属性: value,用于 <input>.<textarea> 组件. checked,用于类型为 checkbox 或者 radio 的 &l ...
- 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,局部钩子函数,全 ...
- React服务端渲染总结
欢迎吐槽 : ) 本demo地址( 前端库React+mobx+ReactRouter ):https://github.com/Penggggg/react-ssr.本文为笔者自学总结,有错误的地方 ...
- react服务端渲染（同构）
学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对re ...
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- （十分钟视频教程）nodejs基础实战教程3：react服务端渲染入门篇
视频截图如下: (具体视频见文末) 前言: 这是小猫的第三篇node教程,本篇内容是由公众号粉丝票选得出的,相信大家对这篇教程是抱有较大希望的,这篇教程由小猫和一位多年的好朋友合作完成(笔名:谷雨,博 ...
- React 避免重渲染
组件的重新渲染 我们可以在 React 组件中的 props 和 state 存放任何类型的数据,通过改变 props 和 state,去控制整个组件的状态.当 props 和 state 发生变化时 ...
随机推荐
- Java序列化(含transient)
什么是序列化? 我们创建的对象只有在Java虚拟机保持运行时,才会存在于内存中.如果想要超出Java虚拟机的生命周期,就可以将对象序列化,将对象状态转换为字节序列,写入文件(或socket传输),后面 ...
- npm 安装卸载模块
npm安装模块 npm install xxx利用 npm 安装xxx模块到当前命令行所在目录 npm install -g xxx利用npm安装全局模块xxx 1 2 本地安装时将模块写入packa ...
- php面试题整理（三）
判断是不是ie浏览器 1,1
- ORM-面向对象&关系数据库
ORM-面向对象&关系数据库 对象关系映射(英语:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程 ...
- Nginx代理与负载均衡
序言 Nginx的代理功能与负载均衡功能是最常被用到的,关于nginx的基本语法常识与配置已在上篇文章中有说明,这篇就开门见山,先描述一些关于代理功能的配置,再说明负载均衡详细. Nginx代理服务的 ...
- 基于BeautifulSoup库的HTML内容的查找
一.BeautifulSoup库提供了一个检索的参数: <>.find_all(name,attrs,recursive,string,**kwargs),它返回一个列表类型,存储查找的结 ...
- mysql锁2
死锁: 指两个事务或者多个事务在同一资源上相互占用,并请求对方所占用的资源,从而造成恶性循环的现象. 出现死锁的原因: 系统资源不足: 进程运行推进的顺序不当: 资源分配不当. 产生死锁的四个必要条件 ...
- 【css】怎么让Chrome支持小于12px 的文字
谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即可实现字体大小不随终端设备或浏览器影响.CSS样式定义如下:-web ...
- 微服务框架surging学习之路——序列化 （转载https://www.cnblogs.com/alangur/p/10407727.html）
微服务框架surging学习之路——序列化 1.对微服务的理解 之前看到在群里的朋友门都在讨论微服务,看到他们的讨论,我也有了一些自己的理解,所谓微服务就是系统里的每个服务都 可以自由组合.自由组 ...
- Linux内存管理 一个进程究竟占用多少空间？-VSS/RSS/PSS/USS
关键词:VSS.RSS.PSS.USS._mapcount.pte_present.mem_size_stats. 在Linux里面,一个进程占用的内存有不同种说法,可以是VSS/RSS/PSS/US ...