详解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 相关文章推荐
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
前端深入理解Typescript泛型概念
Mar 09 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
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
php异常处理捕获错误整理
2019/09/23 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
python实现批量转换图片为黑白
2020/06/16 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
酒店开业主持词
2015/07/02 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技