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

);

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

    }

}