React组件通信

作者: PoWerfulHeart | 来源:发表于2017-07-21 15:45 被阅读29次

React极具魅力的一个地方就是一个页面以组件的形式组成的,在维护和后续查看的时候结果非常清晰。

这里主要说一下以下两个方面:

一.子组件调用父组件方法(父组件向子组件传值)

1.将子组件要调用的方法或值添加到子组件的属性

2.子组件中采用this.props.xxx的方式调用

demo如下:

我们在父组件上初始化一个count,然后将其添加到子组件的属性上,在子组件中再通过this.props.ImParentFunction的方式条用。

结果:

二.父组件调用子组件方法(子组件向父组件传值)

1.子组件中设置好父组件要调用的方法

2.父组件中对子组件设置ref属性,比如ref="getChild"

3.子组件中通过this.refs.getChild.xxx形式调用。

demo如下:

componentDidMount为生命周期,表示载入完成立即执行。

父组件通过functionFromChildren函数采用this.refs.getChildrenFunction.imChildrenFunction的形式调用子组件的imChildrenFunction,并在页面载入后触发:

相关文章

  • React Native 的组件通信方式

    React Native 的组件通信方式 React Native 的...

  • 总结

    React组件之间的通信方式 1.父组件向子组件通信 React数据流动是单向的,通过props传递 2.子组件向...

  • React组件间通信

    不借助redux等状态管理工具的React组件间的通信解决方法 组件通信分类 React组件间通信分为2大类,3种...

  • React Native 架构之 Redux介绍

    React 在 React 中,UI 以组件的形式来搭建,组件之间可以嵌套组合。另,React 中组件间通信的数据...

  • (1)React的开发

    1、React项目架构搭建2、JSX语法3、React组件化开发4、React组件间通信5、React中的事件6、...

  • react组件通信

    react组件通信是一个常用功能,在做react项目中经常遇到 React组件层级关系 在了解Reat组件通讯之前...

  • 干货博客集

    基础 webpack4.x 入门一篇足矣 react组件通信方式汇总 vue组件之间的通信 原生小程序组件通信 w...

  • React学习拾遗2

    组件间通信: 龟兔赛跑-React组件间通信Demo:http://js.jirengu.com/yowec/ed...

  • React父子组件间通信的实现方式

    React学习笔记之父子组件间通信的实现:今天弄清楚了父子组件间通信是怎么实现的。父组件向子组件通信是通过向子组件...

  • 「React Native」Event Bus,消息总线

    (一)父子间组件通信:   一般使用props,回调函数进行通信。(二)跨组件之间通信:  (1)React Na...

网友评论

    本文标题:React组件通信

    本文链接:https://www.haomeiwen.com/subject/dfsekxtx.html