1.父组件向子组件传递参数

 //父组件
import React from 'react';
import './header.css'
import ComponentChild from './headerChild'
class ComponentHeader extends React.Component {
constructor () {
super()
this.state = {
username: 'Song',
age: 18
}
}
render () {
return (
<div>
<ComponentChild name="dongdong"/>//子组件
<p>这是一个测试组件</p>
<p>{this.state.age}</p>
</div>
)
}
}
export default ComponentHeader //子组件
import React from 'react'
class ComponentChild extends React.Component {
render () {
return (
<div>
<p>{this.props.name}</p>//通过this.props.key来过去父组件传递过来的数据
</div>
)
}
}
export default ComponentChild

2.子组件向父组件传递参数

 //子组件
import React from 'react'
class ComponentChild extends React.Component {
render () {
return (
<div>
<button>点击测试:<input type="text" onChange={this.props.handleChange}/></button>//通过函数的形式将参数传递给父组件
<p>{this.props.name}</p>
</div>
)
}
}
export default ComponentChild //父组件
import React from 'react';
import './header.css'
import ComponentChild from './headerChild'
class ComponentHeader extends React.Component {
constructor () {
super()
this.state = {
username: 'Song',
age: 18
}
}
handleChange (event) { // 这个函数是可以用来获取子组件传递过来的数据
this.setState({age:event.target.value})//使用setState将子组件传递过来的值,设置给父组件中的state
}
render () {
return (
<div>
<ComponentChild handleChange={this.handleChange.bind(this)} name="dongdong"/> //这里注意一定要使用bind(this)改变this的指向,否则会报错,显示找不到this
         <p>这是一个测试组件</p>
<p>{this.state.age}</p>
</div>
)
}
}
export default ComponentHeader

这里面注意一点,state是属于组件的私有属性的,props属于外来属性

react----父子组件之间的参数传递的更多相关文章

  1. React 学习(六) ---- 父子组件之间的通信

    当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...

  2. React学习——通过模态框中的表单,学习父子组件之间传值

    import { Button, Modal, Form, Input, Radio } from 'antd'; const CollectionCreateForm = Form.create({ ...

  3. React之父子组件之间传值

    1.新增知识点 /** React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. 父子组件:组件的相互调用中,我们把调 ...

  4. Vue2.0父子组件之间和兄弟组件之间的数据交互

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...

  5. vue之父子组件之间的通信方式

    (一)props与$emit <!-这部分是一个关于父子组件之间参数传递的例子--> <!--父组件传递参数到子组件是props,子组件传递参数到父组件是用事件触发$emit--&g ...

  6. vue项目中的父子组件之间的传值。

    首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...

  7. Vue2.0父子组件之间的双向数据绑定问题解决方案

    对于vue 1.0项目代码,如果把vue换成vue 2.0,那么之后项目代码就完全奔溃不能运行,vue 2.0在父子组件数据绑定的变化(不再支持双向绑定)颠覆了1.0的约定,很遗憾. 解决方案只有两种 ...

  8. Vue.js 父子组件之间通信的方式

    Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...

  9. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  10. Vue(基础四)_总结五种父子组件之间的通信方式

    一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit()  (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...

随机推荐

  1. 阿里Java开发规约笔记

    借助阿里开发规约,回顾一下Java开发编码基础方面的知识,结合自己使用中遇到的问题,记录一下规约中以前翻过的错.有共鸣的问题. 1.覆写方法时要加上@Override注解.重写一个类型T的equals ...

  2. bzoj2521

    最小生成树+最小割 ...我太zz了,没看出来全体减1是一个加1,看见后就是sb题了... 我们发现根据克鲁斯卡尔的过程,我们把边从小到大加入,如果两点已经相连就跳过,那么我们把所有小于等于这条边的边 ...

  3. 将数据从数据仓库Hive导入到MySQL

    1.启动Hadoop,hive,mysql 2.在mysql中建表(需要导入数据的) mysql> CREATE TABLE `dbtaobao`.`user_log` (`user_id` v ...

  4. 聪明的质监员 2011年NOIP全国联赛提高组(二分+前缀和)

    聪明的质监员 2011年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold   题目描述 Description 小 T 是一名质量监督员, ...

  5. (博弈论)51NOD 1069 Nim游戏

    有N堆石子.A B两个人轮流拿,A先拿.每次只能从一堆中取若干个,可将一堆全取走,但不可不取,拿到最后1颗石子的人获胜.假设A B都非常聪明,拿石子的过程中不会出现失误.给出N及每堆石子的数量,问最后 ...

  6. 【洛谷2617_BZOJ1901】Dynamic Rankings(树套树)

    题目: 洛谷 2617 BZOJ 1901 是权限题,\(n=10^4\) ,内存 128 MB :洛谷 2617 \(n=10^5\) ,内存 1024 MB ,数据比较坑. 分析: 蒟蒻初学树套树 ...

  7. PROTEUS快捷键与部分知识点

    缩放 有以下几种方法对原理图进行缩放: 移动鼠标需要所放的地方,滚动鼠标滑轮进行缩放. 移动师表需要缩放的地方,按键盘F6放大,F7缩小 按下ShIFT键,鼠标左键拖拽出需要放大的区域,这叫SHIFT ...

  8. BFS Codeforces Beta Round #94 (Div. 2 Only) C. Statues

    题目传送门 /* BFS:三维BFS,坐标再加上步数,能走一个点当这个地方在步数内不能落到.因为雕像最多8步就会全部下落, 只要撑过这个时间就能win,否则lose */ #include <c ...

  9. ASP.NET 简介(转自Wiki)

    ASP.NET是由微软在.NET Framework框架中所提供,开发Web应用程序的类库,封装在System.Web.dll文件中,显露出System.Web名字空间,并提供ASP.NET网页处理. ...

  10. [转]ASP.NET MVC HtmlHelper扩展之Calendar日期时间选择

    本文转自:http://blog.bossma.cn/asp_net_mvc/asp-net-mvc-htmlhelper-calendar-datetime-select/ 这里我们扩展HtmlHe ...