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. Codeforces Beta Round #52 (Div. 2)

    Codeforces Beta Round #52 (Div. 2) http://codeforces.com/contest/56 A #include<bits/stdc++.h> ...

  2. PHP调用外部程序的方法

    很多情况下需要php调用其他程序如shell命令.shell脚本.可执行程序等等,此时需要使用到诸如exec/system/popen/proc_open等函数,每种函数有各自适合使用的场景以及需要注 ...

  3. HDU 4940 Destroy Transportation system(无源汇上下界网络流)

    Problem Description Tom is a commander, his task is destroying his enemy’s transportation system. Le ...

  4. EOJ Monthly 2018.7 B.锐角三角形(数学几何+思维)

    描述 是否存在面积为S/2的整点锐角三角形?存在输出Yes并输出三个整点坐标,否则输出No. 注意如果存在输出的坐标必须在long long范围内. Input 第一行一个整数S(1<=S< ...

  5. SpringBoot08 请求方式、参数获取注解、参数验证、前后台属性名不一致问题、自定义参数验证注解、BeanUtils的使用

    1 请求方式 在定义一个Rest接口时通常会利用GET.POST.PUT.DELETE来实现数据的增删改查:这几种方式有的需要传递参数,后台开发人员必须对接收到的参数进行参数验证来确保程序的健壮性 1 ...

  6. js常用的数组,,字符串,,Math..正则方法

    数组 slice[start,end] 返回从原数组中指定开始下标到结束下标之间的项目组成新数组(不会影响原数组) splice() 1.删除功能:2个参数 , 起始位置 , 删除的项目 2.插入功能 ...

  7. 再遇ibatisNet

    11年在Mr刘的带领下第一次接触ibatisnet ,当时Mr刘很详细的很讲了xml里的写法还有配置文件之类的,但是随着时间越来越久远.很多东西都开始淡忘了. 如今,再次和它相遇,依然觉得很亲切,虽然 ...

  8. redis创建集群——[ERR] Sorry, can't connect to node 192.168.X.X

    创建集群或者连接时会出现错误:只能用127.0.0.1创建 这是需要修改redis.conf 把bind注释掉 protected-mode no 有些旧版本注释requirepass 技术交流群:8 ...

  9. 9.28 h5日记

    9.28 1.transparent 透明的 颜色 2.placeholder 提示语 在input中使用 跟velue不同 3.写页面需要注意的 (1)页面一定要有层次,分清层次 (2)保证元素模块 ...

  10. c# 24种设计模式

    备忘录模式(Memento Pattern) 策略模式(Strategy Pattern) 抽象工厂模式(Abstract Factory Pattern) 代理模式(Proxy Pattern) 单 ...