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 ...
随机推荐
- window10安装黑苹果
一位大佬的分享笔记 启动盘https://github.com/Macrow/Hactonish clover的下载地址https://sourceforge.net/projects/clovere ...
- swift - 百度地图API集成
1.百度搜索 百度地图api 2. 选中之后选择, 看功能需求下载 API 3. 下载的API拖入项目,此处有坑, 如果只用地图或者 定位,这中写着 是 导航的SDK 别拖进去, 不然报错 怕搞错到 ...
- 4-windows 用cmd 如何输入命令 进入文件夹
比如是你要到d盘的 tmp目录,那么敲入 cd d:\tmp 回车,然后在敲入 d:回车即可
- 微信小程序模板中使用循环
原创文章 本篇介绍如何在模板里使用循环. 方法一: template.wxml,该文件内容为: <template name="msgItem1"> <block ...
- ckplayer iis6 mp4 播放404错误
设置mime. 1.右键网站 2.选择http头 3.点击编辑MIME按钮 4.新增MIME类型 5.在“扩展名”框内输入“mp4”,“MIME类型”框中输入“video/x-mp4” ps:类型不要 ...
- Pycharm小知识
1) 重新更改文件名称:(Shift + F6) 2) 设置IDE皮肤主题 File -> Settings -> Appearance -> Theme -> 选择“Al ...
- Mike and strings 798B
B. Mike and strings time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- svn conflict问题解决办法
转自:http://www.cnblogs.com/aaronLinux/p/5521844.html 目录: 1. 同一处修改文件冲突 1.1. 解决方式一 1.2. 解决方式二 1.3. 解决总结 ...
- dbc file
DBC文件是用来描述CAN网络通信信号的一种格式文件.它可以用来监测与分析CAN网络上的报文数据,也可以用来模拟某个CAN节点.(DBC file is a format file used to d ...
- MySQL表的相关操作
操作数据表之前,必须先选择相应数据表所在的数据库 mysql> USE databaseName; -- 选择数据库 查看该数据库下的数据表 mysql> show tables; 确定数 ...