react 父组件调子组件的方法

1、引入相关js

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/jquery.min.js"></script>

2、js部分代码

<div id="correspond"></div>

<!--js代码-->
<script type="text/babel">
    ///子组件
    var HelloMessage = React.createClass({childMethod: function(){alert("组件之间通信成功");
        },
        render: function() {return <div> <h1>Hello {this.props.name}</h1>  <button onClick={this.childMethod}>子组件</button></div>
        }});

    //父组件
    var ImDaddyComponent = React.createClass({getDS: function(){//调用组件进行通信
            this.refs.getSwordButton.childMethod();
        },
        render: function(){return (<div>
                        <HelloMessage name="John" ref="getSwordButton" />
                        <button onClick={this.getDS}>父组件</button>
                    </div>
            );
        }});

    ReactDOM.render(<ImDaddyComponent  />,
            document.getElementById('correspond'));

</script>

3、页面效果

react 父组件调子组件的方法相关推荐

vue 父组件调子组件方法_vue父组件调用子组件有哪些方法
这次给大家带来vue父组件调用子组件有哪些方法,vue父组件调用子组件的注意事项有哪些,下面就是实战案例,一起来看一下. 情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组 ...
React开发（186）:react 父调用子组件的方法
<BaseTableSearchsearchParams={baseSearchParams}onSearch={this.handleSearch}onRef={(node) => (t ...
react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
vue 子组件调用($emit)父组件方法后父组件方法如何回调子组件方法
子级组件中的实现组件名称:EditTable.vue export default{ name:'ET', ....... methods:{ ShowMore(step){ ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
React组件进阶--组件通讯介绍，组件的 props特点，组件通讯的三种方式子到父，父到子，兄弟到兄弟组件，Context，回顾练习
1.组件通讯介绍组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据(state). 在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能. 而在这个过程中,多个组 ...
react 显示隐藏组件的方法_10种React组件之间通信的方法
来源 | https://segmentfault.com/a/1190000023585646 这两天被临时抽调到别的项目组去做一个小项目的迭代.这个项目前端是用React,只是个小型项目所以并没有 ...
父组件如何获取子组件的属性和方法-使用Ref
作为一名初学者, 我遇到了一个小问题, 父组件如何获取子组件的属性和方法呢? 如下图所示, div是input和button的父组件, 我想要实现的功能特别简单, 那就是在点击button按钮的时候, ...
react基础之--子组件向父组件传值
在父组件中定义一个函数,该函数用于处理传递过来得值(比如用于修改父组件中state得数据) 在子组件调用部分通过属性绑定得形式绑定该函数(在子组件中就可以通过this.props.属性名就可以拿到该函 ...

react 父组件调子组件的方法

react 父组件调子组件的方法相关推荐

最新文章

热门文章