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

brianway 發布于2019-08-23 12:18 / 582人閱讀

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

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

父組件向子組件通信

子組件向父組件通信

非嵌套組件間通信

跨級組件之間通信

1.父組件向子組件通信
父組件通過向子組件傳遞 props，子組件得到 props 后進行相應的處理。
演示代碼：
父組件 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.子組件向父組件通信**
利用回調函數，實現子組件向父組件通信：父組件將一個函數作為 props 傳遞給子組件，子組件調用該回調函數.即可
演示代碼：
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.非嵌套組件間通信**
非嵌套組件，就是沒有任何包含關系的組件，包括兄弟組件以及不在同一個父級中的非兄弟組件
首先需要引入一個包events

npm install events --save

新建ev.js文件，引入 events 包，并向外提供一個事件對象，供通信時使用

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(){
    // 聲明一個自定義事件
    // 在組件裝載完成以后
    this.eventEmitter = emitter.addListener("callMe",(msg)=>{
        this.setState({
            msg
        })
    });
}
// 組件銷毀前移除事件監聽
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 () => {
            // 觸發自定義事件
            emitter.emit("callMe","test")
        }
    }
    return(
        
            childB
            
        
    );
}

}

云服務器 GPU云服務器 js繼承的幾種方式服務器請求的幾種方式 java創建對象的幾種方式最基本的幾種

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98273.html

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

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

Anshiii 2019-07-01 10:49 評論0 收藏0
React中組件通信的幾種方式

摘要：首次發表在個人博客需要組件之進行通信的幾種情況父組件向子組件通信子組件向父組件通信跨級組件通信沒有嵌套關系組件之間的通信父組件向子組件通信數據流動是單向的父組件向子組件通信也是最常見的父組件通過向子組件傳遞需要的信息子組件向父組件通信利用 showImg(https://segmentfault.com/img/remote/1460000012361466?w=1240&h=667)...

yeooo 2019-08-21 18:00 評論0 收藏0
React 組件之間的通訊

摘要：父組件聲明自己支持父組件提供一個函數，用來返回相應的對象子組件聲明自己需要使用我胡漢三又回來了點擊我如果是父組件向子組件單向通信，可以使用變量，如果子組件想向父組件通信，同樣可以由父組件提供一個回調函數，供子組件調用，回傳參數。在使用 React 的過程中，不可避免的需要組件間進行消息傳遞（通信），組件間通信大體有下面幾種情況：父組件向子組件通信子組件向父組件通信跨級組件之間...

dongxiawu 2019-08-23 16:59 評論0 收藏0
我學react之父子組件通信

摘要：父子組件通信父子間通信的幾種情況父組件向子組件通信子組件向父組件通信跨級組件通信兄弟組件通信父組件向子組件通信由于是單向數據流向的，父組件一般通過向子組件傳遞相關的一些信息來看一下下面這個例子，在這里我封裝了一個組件，它的顯示與取消的狀態交 react父子組件通信 react父子間通信的幾種情況父組件向子組件通信子組件向父組件通信跨級組件通信兄弟組件通信父組件向子組件通信...

wwolf 2019-08-23 15:38 評論0 收藏0
聊聊Vue.js組件間通信的幾種姿勢

摘要：子組件向父組件通信方法一使用事件父組件向子組件傳遞事件方法，子組件通過觸發事件，回調給父組件。非父子組件兄弟組件之間的數據傳遞非父子組件通信，官方推薦使用一個實例作為中央事件總線。寫在前面因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js源碼，并做了總結與輸出。文章的原地址：https://github.com/answ...

Profeel 2019-08-21 17:11 評論0 收藏0