React 中組件間通信的幾種方式

brianway 發(fā)布于2019-08-23 12:18 / 588人閱讀

摘要：在使用的過程中，不可避免的需要組件間進(jìn)行消息傳遞通信，組件間通信大體有下面幾種情況父組件向子組件通信子組件向父組件通信非嵌套組件間通信跨級(jí)組件之間通信父組件向子組件通信父組件通過向子組件傳遞，子組件得到后進(jìn)行相應(yīng)的處理。

在使用 React 的過程中，不可避免的需要組件間進(jìn)行消息傳遞（通信），組件間通信大體有下面幾種情況：

父組件向子組件通信

子組件向父組件通信

非嵌套組件間通信

跨級(jí)組件之間通信

1.父組件向子組件通信
父組件通過向子組件傳遞 props，子組件得到 props 后進(jìn)行相應(yīng)的處理。
演示代碼：
父組件 parent.js：

import React,{ Component } from "react";

export default class App extends Component{

    render(){
        return(
            
                
        )
    }
}
子組件 child.js：

import React from "react";

class Child extends React.component{

construtor(props){
 super(props)
 this.state = {}
}
render(){
    return(
        
            { props.title}
        
    )
}

}

export default Child;

**2.子組件向父組件通信**
利用回調(diào)函數(shù)，實(shí)現(xiàn)子組件向父組件通信：父組件將一個(gè)函數(shù)作為 props 傳遞給子組件，子組件調(diào)用該回調(diào)函數(shù).即可
演示代碼：
child.js

import React from "react";

class Child extends React.component{

construtor(props){
 super(props)
 this.state = {}
}
cb = (msg) => {
  this.props.callback(msg);
}
render(){
    return(
         
            
        
    )
}

}

export default Child;

app.js

import React from "react";

export default class App extends React.Component{

callback(msg){
    console.log(msg);
}
render(){
    return(
        
            
    )
}

}

**3.非嵌套組件間通信**
非嵌套組件，就是沒有任何包含關(guān)系的組件，包括兄弟組件以及不在同一個(gè)父級(jí)中的非兄弟組件
首先需要引入一個(gè)包events

npm install events --save

新建ev.js文件，引入 events 包，并向外提供一個(gè)事件對(duì)象，供通信時(shí)使用

import { EventEmitter } from "events";
export default new EventEmitter();

app.js

import React, { Component } from "react";

import childA from "./childA ";
import childB from "./childB";

export default class App extends Component{

render(){
    return(
        
            
            
        
    );
}

}

childA

import React,{ Component } from "react";
import emitter from "./ev"

export default class ChildA extends Component{

constructor(props) {
    super(props);
    this.state = {
        msg:null,
    };
}
componentDidMount(){
    // 聲明一個(gè)自定義事件
    // 在組件裝載完成以后
    this.eventEmitter = emitter.addListener("callMe",(msg)=>{
        this.setState({
            msg
        })
    });
}
// 組件銷毀前移除事件監(jiān)聽
componentWillUnmount(){
    emitter.removeListener(this.eventEmitter);
}
render(){
    return(
        
            { this.state.msg }
            child a
        
    );
}

}

childB:

import React,{ Component } from "react";
import emitter from "./ev"

export default class ChildB extends Component{

render(){
    const cb = (msg) => {
        return () => {
            // 觸發(fā)自定義事件
            emitter.emit("callMe","test")
        }
    }
    return(
        
            childB
            
        
    );
}

}

GPU云服務(wù)器云服務(wù)器 js繼承的幾種方式服務(wù)器請(qǐng)求的幾種方式 java創(chuàng)建對(duì)象的幾種方式最基本的幾種

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98273.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

brianway

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

原生態(tài)Linux桌面系統(tǒng)Ubuntu 20.10桌面版本ISO鏡像體驗(yàn)

閱讀 2613·2021-09-26 10:17
云主機(jī)上怎么建數(shù)據(jù)庫(kù)-云主機(jī)跟云數(shù)據(jù)庫(kù)的區(qū)別？

閱讀 3236·2021-09-22 15:16
TUDCLOUD：促銷兩款特價(jià)香港直連VPS，限量50臺(tái)售完即止，$35/年/1核512M內(nèi)存/5G

閱讀 2145·2021-09-03 10:43
JavaScript是否阻塞解析

閱讀 3270·2019-08-30 11:23
web開發(fā)常用的幾種居中形式

閱讀 3667·2019-08-29 13:23
margin

閱讀 1315·2019-08-29 11:31
react 父組件調(diào)用子組件dom

閱讀 3699·2019-08-26 13:52
閉包--閉包之tab欄切換(四)

閱讀 1404·2019-08-26 12:22

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

React 中組件間通信的幾種方式

{ props.title}

相關(guān)文章