zoukankan      html  css  js  c++  java
  • React父组件调用子组件的方法

    16.3.0之前的设置方法为

    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')
    );

    16.3.0之后(包括16.3.0 version)的设置方法为

    import React, {Component} from 'react';
    
    export default class Parent extends Component {
        render() {
            return(
                <div>
                    <Child onRef={this.onRef} />
                    <button onClick={this.click} >click</button>
                </div>
            )
        }
    
        onRef = (ref) => {
            this.child = ref
        }
    
        click = (e) => {
            this.child.myName()
        }
    
    }
    
    class Child extends Component {
        componentDidMount(){
            this.props.onRef(this)
        }
    
        myName = () => alert('xiaohesong')
    
        render() {
            return ('woqu')
        }
    }
  • 相关阅读:
    linux学习笔记--文件
    linux学习笔记——基础命令
    nginx实现动静分离
    keepalived+nginx高可用负载均衡环境搭建
    keepalived衡环境搭建
    redis配置文件redis.conf说明
    基于sentinel 的redis集群环境搭建
    jdk动态代理
    spring的事物实现
    Linux用户配置
  • 原文地址:https://www.cnblogs.com/universe-cosmo/p/10969351.html
Copyright © 2011-2022 走看看