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 相关文章推荐
Javascript var变量隐式声明方法
Oct 19 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
详解async/await 异步应用的常用场景
May 13 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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
php中的实现trim函数代码
2007/03/19 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
JavaScript触发器详解
2007/03/10 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
JS常用知识点整理
2017/01/21 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python configparser模块操作代码实例
2020/06/08 Python
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
质检部职责
2013/12/28 职场文书
个人简历自我评价
2014/01/06 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
2015年护士节慰问信
2015/03/23 职场文书
健康证明
2015/06/19 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS