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 发生变化时 ...
随机推荐
- python3编写网络爬虫22-爬取知乎用户信息
思路 选定起始人 选一个关注数或者粉丝数多的大V作为爬虫起始点 获取粉丝和关注列表 通过知乎接口获得该大V的粉丝列表和关注列表 获取列表用户信息 获取列表每个用户的详细信息 获取每个用户的粉丝和关注 ...
- （转）Spring Boot(三)：Spring Boot 中 Redis 的使用
http://www.ityouknow.com/springboot/2016/03/06/spring-boot-redis.html Spring Boot 对常用的数据库支持外,对 Nosql ...
- ES5-ES6-ES7_集合Set和Map
集合的概念 集合是一组无序且唯一(元素不能重复)的项组成的.这个数据结构使用了与有限集合相同的数学概念,应用在计算机的数据结构中 特点:key和value相同,没有重复的value Set集合 ES6 ...
- php面试题整理（一）
str_split() print_r(str_split("Shanghai"));Array ( [0] => S [1] => h [2] => a [3] ...
- Thread.interrupt()
作者:Intopass链接:https://www.zhihu.com/question/41048032/answer/89431513来源:知乎著作权归作者所有.商业转载请联系作者获得授权 ...
- Linux的常见问题解答和管理技巧
Linux的常见问题解答和管理技巧 一. 如何建立多用户 提醒大家一句,别一直使用root用户,因为root用户在系统中有着至高无上的权力,一不小心就可能破坏系统.比如我们想删除/temp目录下的文件 ...
- SQL INNER JOIN 关键字
SQL INNER JOIN 关键字 在表中存在至少一个匹配时,INNER JOIN 关键字返回行. INNER JOIN 关键字语法 SELECT column_name(s) FROM table ...
- 转://Oracle Golden Gate 概念和原理
引言:Oracle Golden Gate是Oracle旗下一款支持异构平台之间高级复制技术,是Oracle力推一种HA高可用产品,简称“OGG”,可以实现Active-Active 双业务中心架构 ...
- 【vue】vue +element 搭建项目，将js函数变成vue的函数
demo:时间转换 1.目录 <1>在src文件夹下新建文件夹prototypefns--------在此文件夹创建util.js, <2>在prototypefns下新建文件 ...
- Luogu5221 Product
Luogu5221 Product 求 \(\displaystyle\prod_{i=1}^n\prod_{j=1}^n{\frac{\operatorname{lcm}(i,\ j)}{\gcd( ...