React-跨组件通讯

简介: React-跨组件通讯

首先介绍一下跨组件通讯的之间的关系,如下图:

父子通讯


如果我们想在爷爷组件当中给儿子进行通讯,那么该如何进行实现呢,首先来看第一种方式就是一层一层的传递,为了方便观察这里博主就直接都定义在一个文件当中, 先来看从爷爷给到儿子方法的这么一个过程:

App.js:

import React from 'react';
import './App.css';
class App extends React.Component {
    render() {
        return (
            <div>
                爷爷
                <Father grandpaFunction={this.grandpaFunction.bind(this)}/>
            </div>
        )
    }
    grandpaFunction() {
        console.log('yangbuyiya');
    }
}
class Father extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                爸爸
                <Son grandpaFunction={this.props.grandpaFunction}/>
            </div>
        )
    }
}
class Son extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                儿子
                <button onClick={() => this.sonFn()}>儿子组件按钮</button>
            </div>
        )
    }
    sonFn() {
        this.props.grandpaFunction();
    }
}
export default App;

然后在来看一个儿子像父组件通讯的这么一个过程:


App.js:

import React from 'react';
import './App.css';
class App extends React.Component {
    render() {
        return (
            <div>
                爷爷
                <Father grandpaFunction={this.grandpaFunction.bind(this)}/>
            </div>
        )
    }
    grandpaFunction(name, age) {
        console.log(name, age);
    }
}
class Father extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                爸爸
                <Son grandpaFunction={this.props.grandpaFunction}/>
            </div>
        )
    }
}
class Son extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                儿子
                <button onClick={() => this.sonFn()}>儿子组件按钮</button>
            </div>
        )
    }
    sonFn() {
        this.props.grandpaFunction('yangbuyiya', 18);
    }
}
export default App;

如上的这个栗子主要是演示了一下左边这一块的通讯,如下图:



兄弟通讯


兄弟之间通讯不能直接进行,需要先与父组件通讯,然后父组件在和另外一个组件进行通讯传递对应的数据到达对应的兄弟组件当中完成通讯,结构图如下:

代码实现,App.js:

import React from 'react';
import './App.css';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            age: undefined
        }
    }
    render() {
        return (
            <div>
                <A appFn={this.appFn.bind(this)}/>
                <B name={this.state.name} age={this.state.age}/>
            </div>
        )
    }
    appFn(name, age) {
        this.setState({
            name: name,
            age: age
        });
    }
}
class A extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                兄弟A
                <button onClick={() => {
                    this.aFn()
                }}>兄弟A的按钮</button>
            </div>
        )
    }
    aFn() {
        this.props.appFn('yangbuyiya', 18);
    }
}
class B extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                兄弟B
                <p>兄弟B:{this.props.name}</p>
                <p>兄弟B:{this.props.age}</p>
            </div>
        )
    }
}
export default App;




最后


本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
6月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
357 0
|
6月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
74 0
|
6月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
76 0
|
6月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
75 0
|
6月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
62 0
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
121 0
|
6月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
52 1
|
6月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
119 1
|
6月前
|
存储 前端开发 JavaScript
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
|
6月前
|
缓存 前端开发 API
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)