React-跨组件通讯

2023-10-11 32

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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;