react中不一樣版本父組件調用子組件方法

<div id="correspond"></div>
<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>
複製代碼

這種方式在新版本react是走不通的，須要像下面這種操做

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') } } 複製代碼

做者：流動碼文 連接：https://www.jianshu.com/p/f97aa775899f 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。