react父子组件传参

父级向子级传参:在父组件中,我们引入子组件,通过给子组件添加属性,来起到传参的作用,子组件可以通过props获取父组件传过来的参数。

在父组件中:

import React from 'react'
import ChildCom from './childCom.js'
class ParentCom extends React.Component {
render() {
return (
<div>
<h1>父组件</h1>
<ChildCom content={'我是父级过来的内容'}/>
</div>
)
}
}
export default ParentCom;

在子组件中:

import React from 'react'
class ChildCom extends React.Component {
render() {
return (
<div>
<h2>子组件</h2>
<div>
{this.props.content}
</div>
</div>
)
}
}
export default ChildCom;

子级向父级传参:在父组件中给子组件添加一个属性,这个属性的内容为一个函数,然后在子组件中调用这个函数,即可达到传递参数的效果

在子组件中:

import React from 'react'
class ChildCom extends React.Component {
valueToParent(value) {
this.props.onValue(value);
}
render() {
return (
<div>
<h2>子组件</h2>
<div>
<a onClick={this.valueToParent.bind(this,)}>向父组件传值567</a>
</div>
</div>
)
}
}
export default ChildCom;

在父组件中:

import React from 'react'
import ChildCom from './childCom.js'
class ParentCom extends React.Component {
state = {
getChildValue: ''
}
getChildValue(value) {
this.setState({
getChildValue: value
})
}
render() {
return (
<div>
<h1>父组件</h1>
<div>子组件过来的值为:{this.state.getChildValue}</div>
<ChildCom onValue={this.getChildValue.bind(this)}/>
</div>
)
}
}
export default ParentCom;

React(7) --react父子组件传参的更多相关文章

  1. Angular 项目开发中父子组件传参

    在项目开发中经常会遇到 组件之间传参的问题.今天总结下在使用angular的项目中父子组件传参的问题: 1.父组件向子组件传参: 然后在父组件中 然后在父组件的html中 然后就可以在子组件中使用了 ...

  2. 从 Vue 的视角学 React(四)—— 组件传参

    组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式, ...

  3. vue 父子组件传参

    父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...

  4. vue 监听父子组件传参,对象数据变化

    watch:{ 组件传参的字段 :{ handler (newV, oldV){ 这里打印 newV, oldV 就可以看到数据变化了 } , immediate: true, // 重点 deep: ...

  5. vue 动态组件、父子组件传参

    1.vue中的自定义属性并获得属性的值 自定义属性::data-id语法为 :data-属性  获取属性的值:ev.target.dataset.id 2.vue父子组件传值 3.动态组件使用

  6. vue指令,实例成员,父子组件传参

    v-once指令 """ v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) """ <di ...

  7. Vue父子组件传参新写法

    以前我在写接受自定义事件是这么写的: 后来我在官网看到这样一种说法:可以用$event代替emit事件传入的参数,于是我写成了这样: 直到昨天Vetur更新,给我报了这么一个错误: 报错原因:事件不能 ...

  8. Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)

    一.前言                    1.公共轮播图的实现                    2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...

  9. vue组件传参

    一.父子组件的定义 负值组件的定义有两种,我称为常规父子组件和特殊父子组件. 1.1.常规父子组件 将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以 ...

随机推荐

  1. [洛谷P3958] NOIP2017 奶酪

    问题描述 现有一块大奶酪,它的高度为 h,它的长度和宽度我们可以认为是无限大的,奶酪 中间有许多 半径相同 的球形空洞.我们可以在这块奶酪中建立空间坐标系,在坐标系中, 奶酪的下表面为z = 0,奶酪 ...

  2. ModelViewSet的用法

  3. tensorflow2 keras.Callback logs

    官方文档上表示logs内存的内容为 on_epoch_end: logs include `acc` and `loss`, and optionally include `val_loss` (if ...

  4. JavaScript 常用的技术(陆续更新)

    截取字符串(指定长度) var str = "abc-110001"; //str.substring(起始位置(0开始),截取的长度) str.substring(0,4); / ...

  5. Pycharm创建模板头部默认

    PyCharm 打开,点击左上角 “FILE” 进入 “Settings”,进行头文件设置: 如下: 我的模板: #!/usr/bin/env python# -*- coding:utf-8 -*- ...

  6. vue路由vue-router的安装和使用

    1.安装,如果你没有在创建项目时候选择的情况下  cnpm install vue-router 2.使用    假设App为根组件,两个自定义组件home及list main.js里操作 impor ...

  7. 基于ES6的tinyJquery

    原文地址:Bougie的博客 jQuery作为曾经Web前端的必备利器,随着MVVM框架的兴起,如今已稍显没落.但它操作DOM的便利性无出其右.我用ES6写了一个基于class简化版的jQuery,包 ...

  8. Git学习及使用

    一.认知git理论 1.git出现的背景 版本控制 版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统. 许多人习惯用复制整个项目目录的方式来保存不同的版本,或许还会改名加上 ...

  9. day08—css布局解决方案之多列布局

    转行学开发,代码100天——2018-03-24 本文将记录CSS布局之垂直布局解决方案. 常见的多列布局包括以下: 1.定宽+自适应 2.两列定宽+一列自适应 3.不定宽+自适应 4.两列不定宽+一 ...

  10. python实现压缩文件成zip格式

    实现代码如下: #压缩文件 import time,zipfile class zip: def get_zip(self,files,zip_name): zp=zipfile.ZipFile(zi ...