详解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 相关文章推荐
JavaScript 事件的一些重要说明
Oct 25 Javascript
javascript new一个对象的实质
Jan 07 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
js返回顶部实例分享
Dec 21 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
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
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python的格式化输出(format,%)实例详解
2018/06/01 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
利用Python如何生成便签图片详解
2018/07/09 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
详解python pandas 分组统计的方法
2019/07/30 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python统计字符的个数代码实例
2020/02/07 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
大学军训感言
2014/01/10 职场文书
给老师的道歉信
2014/01/11 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
python基础之停用词过滤详解
2021/04/21 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers