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 {it}=this.props;
return(
<div>
{it.map((item,index)=>{//遍历拿到key值
return <div key={item.id}>
{Object.keys(item)}: //拿到数组
{Object.keys(item).map((v,ind)=>{
return <div key={ind}>
{item[v]} //遍历进行解析内置的json内容
</div>
})}
</div>
})}
</div>
)
}
}
class List extends React.Component{
constructor(props){
super(props);
};
render(){
let {users,companies} = this.props;
let arr = Object.keys(this.props); //拿到json的key值数组
return (
<div>
{ Object.keys(this.props)} //遍历传过来的json数据
{arr.map((item,ind)=>{ //遍历进行解析 拿到数组
return <Item key={ind} it={this.props[item]}/>
})}
</div>
)
}
}
class App extends React.Component{
constructor(props){
super(props);
this.state = {
data
}
};
render(){
return (
<div>
<List users={data.users}/> //将数组分组传过去
<List companies={data.companies}/>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
)
</script>
</body>
</html>
react双组件传值和传参的更多相关文章
- react事件绑定，事件传参，input单向数据绑定
import React, { Component } from 'react'; class New extends Component { constructor(props){ super(pr ...
- vue 和 react 路由跳转和传参
react 1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...
- 从 Vue 的视角学 React（四）—— 组件传参
组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式, ...
- pentaho cde 封装自定义图形控件，动态传参
在实际项目中经常会用到将经常用到的图形表格组成一个控件,其他地方直接调用,类似于服务器开发的接口,而现在就需要将一些常用的图形做封装,这样就不必重复多次创建相同的内容. 下面就简单的定义一个自定义柱形 ...
- React中使用 react-router-dom 路由传参的三种方式详解【含V5.x、V6.x】！！！
路由传值的三种方式(v5.x) params参数 //路由链接(携带参数): <Link to='/demo/test/tom/18'}>详情</Link> //或 <L ...
- React browserHistory.push（）传参
1.browserHistory.push({ "pathname":'/interface_log', state: ...
- vue-router中query和params传参(接收参数）以及$router、$route的区别
query传参: this.$router.push({ path:'/...' query:{ id:id } }) 接收参数:this.$route.query.id params传值: 传参: ...
- react router路由传参
今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...
- react 路由传参
今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...
随机推荐
- Java strictfp
strictfp关键字 用于强制Java中的浮点计算(float或double)的精度符合IEEE 754标准. 不使用strictfp:浮点精度取决于目标平台的硬件,即CPU的浮点处理能力. 使用s ...
- 微服务---Eureka注册中心(服务治理)
在上一篇的初识SpringCloud微服务中,我们简单讲解到服务的提供者与消费者,当服务多了之后,会存在依赖与管理之间混乱的问题,以及需要对外暴露自己的地址,为了解决此等问题,我们学习Eureka注册 ...
- SQLAlchemy 嵌套事务的解决方案
sqlachemy 是python的orm框架,在使用一段时间后,我们通常会出现事务嵌套的情况,看到很多人写代码的时候,居然是session到处传递,这无疑是加大了代码之间的耦合度. 案例: def ...
- 通过JS如何获取IP地址
通过JS获取你真实的外网IP和内网IP,就算开代理也没有用,想想真是太可怕了,还能不能愉快的装逼了! 代码: //get the IP addresses associated with an acc ...
- VBA果然很强大
1.我的是office 2007,新建空白文档-开发工具 -visual basic -project -thisDocument - Document_Open ,写入以下代码(并另存为word ...
- SpringMVC @ResponseBody 406
使用@ResponseBody注解可以让Controller返回json格式的数据,在需要传输一个对象信息的时候往往使用这种方式.如果在使用的时候遇到了406,一般原因是: 缺少jar包.转换成jso ...
- leetcode 344. Reverse String 、541. Reverse String II 、796. Rotate String
344. Reverse String 最基础的旋转字符串 class Solution { public: void reverseString(vector<char>& s) ...
- AT987 高橋君
AT987 高橋君 给出 \(n,\ k\) ,求 \(\displaystyle\sum_{i=0}^kC_n^k\) , \(T\) 次询问 \(T\leq10^5,\ 0\leq k\leq n ...
- P1440 求m区间内的最小值--洛谷luogu
题目描述 一个含有n项的数列(n<=2000000),求出每一项前的m个数到它这个区间内的最小值.若前面的数不足m项则从第1个数开始,若前面没有数则输出0. 输入输出格式 输入格式: 第一行两个 ...
- 深入理解 Object.defineProperty 及实现数据双向绑定
Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...