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组件父传子的更多相关文章

  1. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

  2. Vue父子组件传值 | 父传子 | 子传父

    父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...

  3. Vue ---- 组价 组件化 子传父 父传子

    目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...

  4. vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息

    评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位  splice(0,1,内容)把索引为0 ...

  5. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

  6. Vue其他指令-组件-全局-局部-组件的交互父传子

    v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  7. vue小故事之父子(上下级)通信之父传子props

    vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props  或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...

  8. vue子传父、父传子

    子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...

  9. vue传值 ---- >> 父传子,props()

    父组件:     1 <template> 2     <div class="comment"> 3         <div>comment ...

随机推荐

  1. Unity4.6证书激活问题

    第一次运行的激活问题 安装好Unity4.6之后首次启动会自动连网,但是会出现error loading page错误,SSL peer certificate or SSH remote key w ...

  2. 高盛昂赛 算法题先写corner case

    [方法] 字写大点,先注释框架 链表:指针走就行了,最多是两个同时一起走. 两个链表求交点 //corner case if (headA == null || headB == null) { re ...

  3. 使用Nginx做转发和匹配替换

    Nginx是一个强大的服务器软件,由于处理数据内容处于第七层协议应用层的原因,所以获取的数据也比较完整: Nginx做转发: 这个很简单,vi nginx.conf(编辑nginx配置文件) 添加lo ...

  4. list转map

    参考https://cloud.tencent.com/developer/article/1033706 import java.lang.reflect.Field; import java.ut ...

  5. 动态规划:压缩编码;WirelessRouters;

    转载请注明~ 如果有理解不到位或错误的情况,劳烦大神指正,一定感激不尽! 题目来源:CCF201612-4 压缩编码 题目的意思是: 1. 顺序给定文字中n个单词出现的频率(次数): 2. 对这n个单 ...

  6. linux 常见基础知识(此文章将会在整个linux学习过程中,不断添加)

    1,linux 文件类型 普通文件 目录文件 链接文件 块设备 字符设备 Socket 管道文件 - d l b c s p 2,linux 文件属性 蓝色 绿色 浅蓝色 红色 灰色 目录 可执行文件 ...

  7. Jenkins发送邮件,邮件正文嵌套的html中文显示乱码

    解决方案: 1.添加系统变量.变量名:JAVA_TOOL_OPTIONS变量值:-Dfile.encoding=UTF8 2.打开jenkins,系统管理--系统设置,在全局属性处勾选Environm ...

  8. IDEA 中javadoc插件不能设置的问题

    解决方案 1.手动下载插件 https://github.com/ranzou06/intellij-javadocs/blob/master/intellij-javadocs.zip?raw=tr ...

  9. 关于java.io.IOException: HADOOP_HOME or hadoop.home.dir are not set.的问题

    报错如下: 300 [main] DEBUG org.apache.hadoop.util.Shell - Failed to detect a valid hadoop home directory ...

  10. UI设计中颜色的前进色与后退色

    暖色调的颜色属于前进色.膨胀色可以使物体的视觉效果变大,而收缩色可以使物体的视觉效果变小.   颜色的另外一种效果.有的颜色看起来向上凸出,而有的颜色看起来向下凹陷,其中显得凸出的颜色被称为前进色,而 ...