详解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 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
firefox下frameset取不到值的解决方法
Sep 06 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
SVG实现时钟效果
Jul 17 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 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读取PDF内容配合Xpdf的使用
2012/11/24 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
php实现登陆模块功能示例
2016/10/20 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
书法比赛获奖感言
2014/02/10 职场文书
技能培训通讯稿
2015/07/18 职场文书
如何撰写促销方案?
2019/07/05 职场文书
使用pytorch实现线性回归
2021/04/11 Python
Python基础之元类详解
2021/04/29 Python
golang中的并发和并行
2021/05/08 Golang
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL