react组件父传子
react组件父传子,子组件使用父组件的数据,用props
import React, { Component } from 'react'; class App extends Component {
constructor(props){
super(props);
this.state = {
arr :[1,2,3] // 父组件数据
}
}
render() {
return (
<div>
{/* 父组件直接使用this.state */}
<div>{this.state.arr}</div>
{/* 把父组件数据绑定到子组件中 */}
<Test content={this.state.arr}></Test>
</div>
);
}
}
class Test extends Component {
render(){
return (
<div>
{/* this.props获取父组件数据 */}
<div>{this.props.content}</div>
</div>
)
}
}
export default App;
react组件父传子的更多相关文章
- vue 组件之间相互传值 父传子 子传父
1.父传子 把要传入的值放到父标签里 子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...
- Vue父子组件传值 | 父传子 | 子传父
父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...
- Vue ---- 组价 组件化 子传父 父传子
目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...
- vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息
评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位 splice(0,1,内容)把索引为0 ...
- vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
首先文字简单撸一下 父子传子 -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父 ------在父组件升上自定义一个方法,在子组件里通过this ...
- Vue其他指令-组件-全局-局部-组件的交互父传子
v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...
- vue小故事之父子(上下级)通信之父传子props
vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props 或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...
- vue子传父、父传子
子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...
- vue传值 ---- >> 父传子,props()
父组件: 1 <template> 2 <div class="comment"> 3 <div>comment ...
随机推荐
- java函数方法
1.方法重载 (1)源代码 // MethodOverload.java // Using overloaded methods public class MethodOverload { publi ...
- 官方教程:Apache Kylin和Superset集成,使用开源组件,完美打造OLAP系统
本文转自Apache Kylin公众号apachekylin. Superset 是一个数据探索和可视化平台,设计用来提供直观的,可视化的,交互式的分析体验. Superset 提供了两种分析数据源的 ...
- JSP中的数据库操作,MySQL基础操作(一)
一.JDBC JDBC(java data base concectivity),是一种用于执行SQL语句的java API,可以为多种关系库提供统一访问. 通常使用JDBC完成以下操作: 1)同数据 ...
- rsync同步工具的配置与使用
一.什么是rsync?rsync是一款开源的,快速的,多功能的,可实现全量及增量的本地或远程数据同步备份的优秀工具. rsync官网 http://rsync.samba.org/ 二.rsync的工 ...
- Windows删除服务方法
- istio promethus收集不到数据
1.重新apply istio.yaml kubectl apply -f install/kubernetes/istio.yaml kubectl get metrics.config.istio ...
- mybatis入门--#{}和${}的区别
我们知道,在mybatis中,sql语句是需要我们自己写的.跟在普通的sql不一样的是,我们在使用mybatis框架的时候,使用的占位符不是 ? 而是 #{} 有时候还会出现这个符号 ${} 这些符号 ...
- poj 2828(线段树 逆向思考) 插队是不好的行为
http://poj.org/problem?id=2828 插队问题,n个人,下面n行每行a,b表示这个人插在第a个人的后面和这个人的编号为b,最后输出队伍的情况 涉及到节点的问题可以用到线段树,这 ...
- 简单选择排序(js版)
简单选择排序 基本思想:通过n-i次关键字间的比较,从n-i+1个记录中选出关键字最小的记录,并和第i个记录交换.(废话不多说,先看代码). function SelectSort(arr){ var ...
- SoftwareEngineering.APIDesign.iOS
API Design for iOS/Mac (Objective-c Edition) 1. UI Control Library API的设计 和已有组件保持一致(例如: 使用标准的API, 模型 ...