react 父组件与子组件之间的值传递的方法


Posted in Javascript onSeptember 14, 2017

概念上,组件是封闭的环境。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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
BootStrap TreeView使用实例详解
Nov 01 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 #Javascript
JS中跳出循环的示例代码
Sep 14 #Javascript
JS验证码实现代码
Sep 14 #Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 #Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 #Javascript
JavaScript动态绑定详解
Sep 14 #Javascript
React-Native使用Mobx实现购物车功能
Sep 14 #Javascript
You might like
农民和部队如何穿矿
2020/03/04 星际争霸
两种php调用Java对象的方法
2006/10/09 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
JavaScript 自定义事件之我见
2017/09/25 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
基于vuex实现购物车功能
2021/01/10 Vue.js
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
民族团结先进个人材料
2014/02/05 职场文书
学习经验交流会主持词
2014/04/01 职场文书
竞聘上岗演讲
2014/05/19 职场文书
医德医魂心得体会
2014/09/11 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
PO模式在selenium自动化测试框架的优势
2022/03/20 Python