详解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 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
JS访问对象两种方式区别解析
Aug 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读取目录下所有文件的代码
2008/01/07 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
php的4种常见运行方式
2015/03/20 PHP
Yii核心验证器api详解
2016/11/23 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
js实现左右轮播图
2020/01/09 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
司法所长先进事迹
2014/06/02 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
原告离婚代理词
2015/05/23 职场文书
旅游投诉信范文
2015/07/02 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android