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 相关文章推荐
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
前台js调用后台方法示例
Dec 02 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
javascript学习小结之prototype
Dec 03 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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中目录,文件操作详谈
2007/03/19 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
Python translator使用实例
2008/09/06 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
Python requests模块实例用法
2019/02/11 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
耐克中国官方商城:Nike中国
2018/10/18 全球购物
非常详细的C#面试题集
2016/07/13 面试题
一些Unix笔试题和面试题
2012/09/25 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
个人更名证明
2015/06/23 职场文书