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. pa sslvpn使用手册

    1.浏览器输入https://x.x.x.x 根据电脑操作系统及位数选择下载 2.安装 直接“下一步”,到  输入IP地址x.x.x.x 点击连接会有证书错误提示 此时点击显示证书→本地计算机→安装到 ...

  2. 项目总结06:Java Excel文件导入功能HSSFWorkbook(xls)和 XSSFWorkbook (xlsx)

    项目中碰到Excel文件打入数据功能Mark一下 package com.blue.pem.client.util; import java.io.File; import java.io.FileI ...

  3. [leetcode]445. Add Two Numbers II 两数相加II

    You are given two non-empty linked lists representing two non-negative integers. The most significan ...

  4. declare -A color

    #!/bin/bash ## 声明变量 declare -A color # 定义颜色 # bc_color : background color color[red]="\e[1;31m& ...

  5. 41-ssm中对象查找正确但是没有将数据库中某个属性值赋给对象的一个成员变量

    原因: 变量名虽然与 数据库字段一致,但是 包含下划线,如: a_b,数据库确实也是a_b: 但是ssm开启驼峰命名了,就要将变量名改为   aB , 驼峰命名就可以了.

  6. go语言sync包的学习(Mutex、WaitGroup、Cond)

    package main; import ( "fmt" "sync" "runtime" "time" ) //加锁, ...

  7. html5的鼠标拖拽

    鼠标拖拽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  8. WebApi的过滤器

    代码: using System; using System.Collections.Generic; using System.IO; using System.Linq; using System ...

  9. python re正则

    一:什么是正则? 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则.(在Python中)它内嵌在Python中,并通过 r ...

  10. c#Loading 页SplashScreenManager的使用

    一.新建一个加载界面: SplashScreenManager控件只是作为加载界面的统一管理器,我们要使用加载界面,需要自行创建加载界面,两种方法如下: 1.点击SplashScreenManager ...