17React中子组件的通信(子与子)

1:有个两个子组件 他们之前有数据交互

新建两个子组件  Child8  和 Child9

在Child9.js中写入代码

import React, { Component } from 'react'
export default class Child9 extends Component {
    constructor(props){
        super(props);
    }
    render() {
        return (
            <div>
                我是第九个子组件
                <input  ref="child9Msg"/>
            </div>
        )
    }
}

在Child8.js中要调用Child9的内容 有一个共同的父组件(App.js)

在Child8.js中写入

import React, { Component } from 'react'

export default class Child8 extends Component {
    constructor(props){
        super(props);
        this.state={
            num:""
        }

    }
    render() {
        return (
            <div>
                我是第八个子组件 <button onClick={
                    ()=>{
                        var that = this;
                        this.props.showChild9Msg(function(value){
                            that.setState({
                                num:value
                            })
                        });
                    }
                }>点击获取老9的数据</button>
                {this.state.num}
            </div>
        )
    }
}

代码注释

在App.js中如何对数据进行传递

写入代码如下