react如何实现子组件向父组件通信的方法
这篇文章主要介绍react如何实现子组件向父组件通信的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
10年的商都网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整商都建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“商都网站设计”,“商都网站推广”以来,每个客户项目都认真落实执行。
react子组件向父组件通信有两种方法:回调函数和自定义事件机制;但有时用自定义事件会显然过于复杂,所以一般用回调函数,父组件事先定义好回调函数,并将回调函数传递给子组件,子组件调用回调函数,向父组件通信。
该方法适用于所有品牌的电脑。
React子组件向父组件通信
在 React 中,子组件向父组件通信可以使用两种方法实现:
1、利用回调函数:这是 JavaScript 灵活方便之处,这样就可以拿到运行时状态。
2、 利用自定义事件机制:这种方法更通用,使用也更广泛。设计组件时,考虑加入事件机制往往可以达到简化组件 API 的目的。
但有时用自定义事件会显然过于复杂,为了达到目的,一般会选择较为简单的方法。
子组件向父组件通信一般用回调函数,父组件事先定义好回调函数,并将回调函数传递给子组件,子组件调用回调函数,向父组件通信。
回调函数
实现在子组件中点击隐藏组件按钮可以将自身隐藏的功能
List3.jsx
import React, { Component } from 'react'; import PropTypes from 'prop-types'; class List3 extends Component { static propTypes = { hideConponent: PropTypes.func.isRequired, } render() { return (哈哈,我是List3); } } export default List3;
App.jsx
import React, { Component } from 'react'; import List3 from './components/List3'; export default class App extends Component { constructor(...args) { super(...args); this.state = { isShowList3: false, }; } showConponent = () => { this.setState({ isShowList3: true, }); } hideConponent = () => { this.setState({ isShowList3: false, }); } render() { return ({ this.state.isShowList3 ?); } }:null }
观察一下实现方法,可以发现它与传统回调函数的实现方法一样.而且setState一般与回调函数均会成对出现,因为回调函数即是转换内部状态是的函数传统;
以上是“react如何实现子组件向父组件通信的方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网站题目:react如何实现子组件向父组件通信的方法
文章位置:http://myzitong.com/article/jjgdje.html