React组件通信

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,并在页面载入后触发:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 组件间通信 父组件向子组件通信React规定了明确的单向数据流,利用props将数据从父组件传递给子组件。故我...
    Dabao123阅读 4,464评论 0 4
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 12,474评论 2 35
  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 8,950评论 1 10
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 7,848评论 1 18
  • “我希望有个如你一般的人,如山间清爽的风,如古城温暖的光。从清晨到夜晚,由山野到书房。只要最后是你,就好。” 没能...
    六尘影阅读 5,133评论 8 9

友情链接更多精彩内容