详解react组件通讯方式(多种)


Posted in Javascript onMay 06, 2020

1、父组件向子组件传值

父组件向子组件传值一般采用props属性传递

父组件:

import React from 'react'
import Child from './Child'

const dataList = [
 { id: '001', value: '张三' },
 { id: '002', value: '李四' }
]

const Parent = props => {
 return (
  <ul>
   <Child dataList={dataList}></Child>
  </ul>
 )
}

export default Parent

子组件:

import React from 'react'

const Child = props => {
 return (
  <React.Fragment>
   {
    props.dataList.map(item => <li key={item.id}>{item.value}</li>)
   }
  </React.Fragment>
 )
}

export default Child

详解react组件通讯方式(多种)

2、子组件向父组件传值

子组件调用父组件传过来的回调函数来更改父组件的state

父组件

import React, { useState } from 'react'
import Child from './Child'

const Parent = props => {
 const [count, setCount] = useState(0)

 return (
  <Child count={count} setCount={setCount}></Child>
 )
}

export default Parent

子组件

import React from 'react'

const Child = props => {
 return (
  <React.Fragment>
   <button onClick={() => {props.setCount(props.count-1)}}>-</button>
   <span>{props.count}</span>
   <button onClick={() => {props.setCount(props.count+1)}}>+</button>
  </React.Fragment>
 )
}

export default Child

详解react组件通讯方式(多种)

3、跨级组件传值(祖孙组件)

context是一个全局变量,像是一个大容器,在任何地方都可以访问到,我们可以把要通信的信息放在context上,然后在其他组件中可以随意取到;
但是React官方不建议使用大量context,尽管他可以减少逐层传递,但是当组件结构复杂的时候,我们并不知道context是从哪里传过来的;而且context是一个全局变量,全局变量正是导致应用走向混乱的罪魁祸首.

父组件

import React, { useState } from 'react'
import Child from './Child'

export const MyContext = React.createContext('hello')

const Parent = props => {
 return (
  <MyContext.Provider value="world">
   <Child />
  </MyContext.Provider>
 )
}

export default Parent

子组件

import React from 'react'
import Son from './Son'

const Child = props => {
 return (
  <Son />
 )
}

export default Child

孙组件

import React from 'react'
import { MyContext } from './Parent'

export default class Son extends React.Component {
 render() {
  return (
   <MyContext.Consumer>
    {
     context => <div>{context}</div>
    }
   </MyContext.Consumer>
  )
 }
}

详解react组件通讯方式(多种)

参考:
https://blog.csdn.net/xingfuzhijianxia/article/details/86151243
https://www.cnblogs.com/qinney1109/p/11202085.html

到此这篇关于详解react组件通讯方式的文章就介绍到这了,更多相关react组件通讯内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
js实现动态添加上传文件页面
Oct 22 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
Vue实现可移动水平时间轴
Jun 29 Javascript
Node.js API详解之 os模块用法实例分析
May 06 #Javascript
js实现无缝轮播图特效
May 09 #Javascript
js实现上传按钮并显示缩略图小轮子
May 04 #Javascript
js代码实现轮播图
May 04 #Javascript
原生js实现轮播图特效
May 04 #Javascript
jquery实现手风琴案例
May 04 #jQuery
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 #Javascript
You might like
PHP语法速查表
2006/12/06 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
javascript基本算法汇总
2016/03/09 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
Python文件及目录操作实例详解
2015/06/04 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
详解python中eval函数的作用
2019/10/22 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
工商管理实习生自我鉴定范文
2013/12/18 职场文书
实习心得体会
2014/01/02 职场文书
演讲稿格式
2014/04/30 职场文书
空气的环保标语
2014/06/12 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python