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 发生变化时 ...
随机推荐
- zTree获取当前节点的下一级子节点数
使用zTree插件实现树形图中,需要获取当前点击的父节点的子节点数的需求,使用treeNode.children获取子节点数据集合,使用length方法获取集合长度.将当前节点的treeNode传入即 ...
- Git&GitHub语法大全
目录 1. GitHub与Git万用语法 1)创建库 2)添加和提交到仓库 3)版本回退 4)缓存区和暂存区 5)撤销和删除文件 6)远程仓库 7)创建和合并分支 2. 更多Git语法 1. GitH ...
- 记录参加QCon2017北京站的心得
如有侵权,请告知作者删除.scottzg@126.com 很荣幸参加QCon全球软件开发大会,这里特别感谢我们部门的总经理,也是<互联网广告算法和系统实践>此书的作者王勇睿.因为他我才有这 ...
- Mysql 数据库设置三大范式 数据库五大约束 数据库基础配置
数据库设置三大范式 1.第一范式(确保每列保持原子性) 第一范式是最基本的范式.如果数据库表中的所有字段值都是不可分解的原子值,就说明该数据库满足第一范式. 第一范式的合理遵循需要根据系统给的实际需求 ...
- 转://Oracle 数据备份与恢复微实践
1.模拟控制文件丢失后的数据库恢复(完全恢复) 今天的主题是备份与恢复,目的就是保护数据的安全性,众所周知Oracle之所以在市场上占据了50%的份额,与它提供了强大的数据保护措施是分不开的,下面我们 ...
- C. Nice Garland
题意: 就是有一串灯分别颜色是R,G,B.要求将每种颜色的灯相隔2个不同的灯.比如,RGR变成RGB才叫好看. 分析: RGB有6种排列,分别是:"RGB", "RBG& ...
- 6-MVC结构简介
一.javeEE的项目结构层次:MVC1.Model:模型层(DAO+业务层) 2.View:视图层 jsp3.Control:控制层 servlet 二.分层的原则:1.层与层之间松耦合,层内保持高 ...
- 18.JAVA经典编程题(50题及答案)
用oop做一个进销存系统:1.货物对象属性:编号(唯一),名称,单价,类别,厂家,厂家地址,厂家联系方式,库存,最后进货时间2.功能:登录,入库,出库,库存查询,操作记录查询3.功能描述:登录:管理员 ...
- 根据成绩输出对应的等级(使用if多分支和switch语句分别实现)
根据成绩输出对应的等级,使用if多分支和switch语句分别实现. a) A级 [90,100] b) B级 [80,90) c) C级 [70, ...
- sklearn官网-多分类问题
sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...