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

最新推荐文章于 2023-12-11 18:03:42 发布

大雷神

最新推荐文章于 2023-12-11 18:03:42 发布

阅读量876

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/ldc121xy716/article/details/104005482

版权

React 专栏收录该内容

26 篇文章 28 订阅

订阅专栏

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

代码注释