详解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 学习笔记一些小技巧
Mar 28 Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
js实现倒计时关键代码
May 05 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
javascript单张多张图无缝滚动实例代码
May 10 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 OPCode缓存 APC详细介绍
2010/10/12 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Python解析json代码实例解析
2019/11/25 Python
解决Python3下map函数的显示问题
2019/12/04 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
七年级英语教学反思
2014/01/15 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL