当前位置:首页 > 日记 > 正文

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;

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

相关文章

ps中怎么制作另类花边文字字体效果

ps中怎么制作另类花边文字字体效果

字体,文字,花边,另类,效果,我们时常会在一些报刊、杂志看过花边字,其主要是起到点缀、烘托的效果。以下小编&ldquo;林曌乐园&rdquo;便为你分享如何通过PS软件制作花边字,希望能帮到你。软件名称:Adobe Flash Professional CS5 官方简体中文完…

photoshop画布如何调整?PS画布大小

photoshop画布如何调整?PS画布大小

设置,方法,调整,大小,电脑软件,photoshop 一款强大测处理软件,通过这款软件可以进行图片处理,也可以进行图片的创作!在创作图片的时候,首先要先对图片的画布进行规划,万一创作到一半发现画布太小,就需要对画布调整,下面就为大家介绍PS画布大小设置…

node.js学习之事件模块Events的使

node.js学习之事件模块Events的使

学习,模块,事件,示例,电脑软件,前言本文主要给大家介绍了关于node.js事件模块Events使用的一些示例,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。环境:Node v8.2.1; Npm v5.3.0; OS Windows101、 Node事件介绍Node大多数核…

Node.js 使用流实现读写同步边读边

Node.js 使用流实现读写同步边读边

读写,同步,功能,电脑软件,Node,废话不多说了,直接给大家贴代码了,具体代码如下所示://10个数 10个字节,每次读4b,写1blet fs=require("fs");function pipe(source,target) { //先创建可读流,再创建可写流 //先读一次,rs.on(data) //将读到的…

Angular.js中下拉框实现渲染html的

Angular.js中下拉框实现渲染html的

方法,下拉框,电脑软件,Angular,js,前言大家都知道angualrjs处于安全的考虑,插值 指令会对相应字符串进行过滤,避免出现html攻击。但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框代码如下:<body ng-app="app" ng-controller="cont…

微信小程序实现tab切换效果

微信小程序实现tab切换效果

效果,程序,电脑软件,微信小,tab,微信小程序之tab切换效果,如图:最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能).wxml代码:<view class="body"> <view class="na…

如何将ps软件进行汉化

如何将ps软件进行汉化

方法,汉化,如何将,电脑软件,ps,  ps软件相信你很多同学都知道还有别的语言版本,如果下载的不是汉语可以进行汉化的。但是很多同学还不太清楚。那么接下来下面是小编整理的一些关于如何将ps软件进行汉化,供您参阅。将ps软件进行汉化的方法首…

PS制作唯美炫光金粉效果的圣诞文字

PS制作唯美炫光金粉效果的圣诞文字

教程,文字,金粉,圣诞,唯美,的文字特效学习者和未来的设计师们,大家好。下面的教程主要是教大家使用Photoshop来制作一个非常炫的金粉效果的圣诞文字。这样的金粉效果挺漂亮的,大家也可以把它运用到夜店的海报设计,或者电商设计当中。缺点是这…

powerpoint中柱状图怎么做

powerpoint中柱状图怎么做

柱状图,方法,怎么做,中做,电脑软件,  ppt中经常用到图表,比如柱形图、圆饼图等,这些图就是基于一定的数据建立起来的,所以我们得先建立数据表格然后才能生成图表,那么ppt中怎么做柱状图?下面给大家分享吧。在ppt中做柱状图的方法1. 打开excel…

30款最新的2018新年宣传单/海报/贺

30款最新的2018新年宣传单/海报/贺

宣传单,海报,新年,最新,电脑软件,接下来请的各位朋友欣赏30款最新的2018新年宣传单/海报/贺卡设计,包括新年快乐宣传单、新年庆祝宣传单、新年销售宣传单、新年庆祝啤酒聚会宣传单、新年倒计时宣传单、新年销售宣传单及新年聚会庆祝海报、除…

js实现移动端导航点击自动滑动效果

js实现移动端导航点击自动滑动效果

移动端,滑动效果,导航,电脑软件,js,本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下移动端模拟导航可点击自动滑动 0.1.4。导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围【依赖于iscroll.js…

基于ASP.NET Core数据保护生成验证

基于ASP.NET Core数据保护生成验证

验证,数据保护,示例,电脑软件,NET,ASP.NET Core Data Protection 不仅提供了非对称加密能力,而且提供了灵活的秘钥存储方式以及一致的加解密接口(Protect与Unprotect)。Session中用到了它,Cookie验证中用到了它,OpenIdConnect中也用到了它。。。…