react 父组件与子组件之间的值传递的方法
时间:2019-04-06
本文章向大家介绍react 父组件与子组件之间的值传递的方法,主要包括react 父组件与子组件之间的值传递的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
概念上,组件是封闭的环境。React中是单向数据流的设计,也就是是说只有父组件传递资料给子组件这回事。以正确的技术说明,拥有者组件可以设置被拥有者组件中的数据。
那么子组件要如何与父组件沟通这件事,简单的来说,是一种迂回的作法,在父组件中设置了一个方法(函数),然后传递给子组件的props,子组件在事件触发时,直接呼叫这个props所设置的方法(函数)。但这中间,有谁(对象)呼叫了函数的设置,也就是this的作用。
父组件到子组件用props设置,子组件到父组件用上面说的方式,这是基本的套路,但它只适用于简单的组件结构,因为它相当麻烦,而且不灵活。那么如果要作到子组件与子组件要彼此沟通这件事,就不是太容易。当然,我想你已经听过,复杂的应用需要额外使用flux或redux来解决这问题,这是必经之路。
不过,在思考整体的React应用设计时,要有应用领域状态,也就是全局状态的概念。第一是应用领域state(状态)的,通常会在父组件中,而不是子组件中,子组件有可能很多,位于树状结构很深的地方。
例子:
子组件
import React, { Component } from 'react' export default class Item extends Component { constructor(props) { super(props) this.state = { prices: 0 } } handleChange(){ const prices =800; this.setState({ prices: price }) //用传过来的changePrice属性(props),是个函数,呼叫它把price交给父组件中的函数去处理 this.props.changePrice(price) } render() { const { prices } = this.state; return ( <div> <div onChange={this.handleChange.bind(this)}> </div> <p>{prices}</p> </div> ) } }
父组件
import React, { Component } from 'react'; import Item from './Item' class App extends Component { constructor(props) { super(props) this.state = {price: 0} } //给子组件用来传price用的方法 changePrice(price){ this.setState({price: price}) } render() { return ( <div> <Item changePrice={this.changePrice.bind(this)}/> <p>{this.state.price}</p> </div> ); } } export default App;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 海量数据迁移之一个误操作的问题总结(r3笔记第21天)
- 关于dblink锁定带来的问题(r3笔记第20天)
- 利用sql语句解决简单的数学题(r3笔记第19天)
- 用XGBoost做时间序列预测—forecastxgb包
- 数据挖掘算法(logistic回归,随机森林,GBDT和xgboost)
- 关于修改数据库参数的测试(r3笔记第18天)
- 50多条实用mysql数据库优化建议
- 关于查询转换的一些简单分析(一) (r3笔记第37天)
- 简单实用的sql小技巧(第一篇) (r3笔记第36天)
- 关于修改分区表的问题总结 (r3笔记35天)
- 利用Python绘制MySQL数据图实现数据可视化
- 生产环境sql语句调优实战第九篇(r3笔记第34天)
- python数据分析之股票实战
- 使用Python编写网络爬虫抓取视频下载资源
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【入坑JAVA安全】JAVA反射机制
- 小妹妹,我想握着你的手,不为别的,只为给你讲清楚CVE-2020-5902
- 不是吧?阿sir!周末你就不学习了吗?
- 灰盒方式通关WebGoat8
- 调试支付宝脱机认证接口遇到的问题总结
- 换一种姿势挖掘任意用户密码重置漏洞
- 表哥,有没有XMLDecoder反序列化的案例?
- 不得不说,minigui真的很坑
- 树的遍历总结
- ggplot2|详解八大基本绘图要素
- LDheatmap|SNP连锁不平衡图(LD)可视化,倒三角图?
- Oracle 表分区笔记
- Java并发编程
- 让终端支持https,移植OpenSSL和libcurl到嵌入式linux,遇到的问题总结
- ComplexHeatmap|根据excel表绘制突变景观图(oncoplot)