React之組件通信

binta 發布于2019-08-26 13:42 / 2816人閱讀

摘要：最近閑來無事自學框架，自學過程中所有的問題經驗都會在此記錄，希望可以幫助到學習框架的同學廢話不多說上代碼。

最近閑來無事自學React框架，自學過程中所有的問題經驗都會在此記錄，希望可以幫助到學習React框架的同學,廢話不多說上代碼。
首先是父傳子：

import React, { Component } from "react";
import Com1 from "./componments/com1"

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      arr: [{
          "userName": "fangMing", "text": "123333", "result": true
      }, {
          "userName": "zhangSan", "text": "345555", "result": false
      }, {
          "userName": "liSi", "text": "567777", "result": true
      }, {
          "userName": "wangWu", "text": "789999", "result": true
      },]
    };
    this.foo = "我來自父組件"  //這個也是父傳子方法，可能初學者有點迷，剛開始我也用來和arr = {this.state.arr}做區分
  };
  render() {
    return (
      
        
                              
        
        
      
    );
  }
}
export default App;

子組件：

import React, { Component } from "react";

class Ele extends Component{
    constructor(props){
       super(props)  
    };
    render(){
        return (
           
               Hello, {this.props.age}
               {this.props.fn}
               
                    {
                        this.props.arr.map(item => { //這個地方通過this.props.arr接收到父組件傳過來的arr，然后在{}里面進行js的循環
                            return (
                                
                                    {item.userName} 評論是:{item.text}
                                
                            )
                        })
                    }
                
           
        );
    };
}

export default Ele;

結果顯示：

以上是父傳子的方法，主要還是使用props傳值，下面看看子傳父.

子傳父：
首先是子組件：

import React, { Component } from "react";

class Ele extends Component{
    constructor(props){
       super(props);
       this.state = ({
            childText: "我來自子組件"
       })  
    };
    clickFun(text) {  //定義觸發的方法
        this.props.pfn(text)//這個地方把值傳遞給了props的事件當中
    }
    render(){
        return (
                          
                {/* 通過事件進行傳值，如果想得到event，可以在參數最后加一個event，
                這個地方還是要強調，this，this，this */}
                
           
        );
    };
}

export default Ele;

父組件：

import React, { Component } from "react";
import Com1 from "./componments/com1"

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      parentText: "現在是父組件",     
  };
  fn(data) {
    this.setState({
        parentText: data //把父組件中的parentText替換為子組件傳遞的值
    },() =>{
       console.log(this.state.parentText);//setState是異步操作，但是我們可以在它的回調函數里面進行操作
    });
  };
  render() {
    return (
      
         {/*通過綁定事件進行值的運算，這個地方一定要記得.bind(this)，不然會報錯，切記切記，因為通過事件傳遞的時候this的指向已經改變 */}
        text is {this.state.parentText}
      
    );
  }
}
export default App;

以上是父子組件傳值的方法，有不對的地方還望指正
還有兄弟組件傳值還沒學到，兄弟組件傳值學到會更新上來
源碼地址：
https://github.com/Nick091608... 歡迎star

GPU云服務器云服務器組件和組件通信組件通信組件之間通信父子組件通信

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

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

我學react之父子組件通信

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

wwolf 2019-08-23 15:38 評論0 收藏0
react與redux通信之hook

摘要：新方案隨著的發布，功能正式投入使用。那么，如果我們使用了，又該如何跟通信呢針對于這個問題，業界有人提供了一個取代的新插件。提供的創建上下文，返回該對象。可以預見的是，當你使用了，會在項目中逐漸把消滅，最后跟語法糖告別，回歸函數的世界。 react和redux建立通信的方式有2種方案：老方案connect 新方案hook 老方案connect 曾經，我們會使用connect建立r...

lemon 2019-08-23 17:08 評論0 收藏0
React中組件通信的幾種方式

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

yeooo 2019-08-21 18:00 評論0 收藏0
react組件通信實現表單提交

摘要：組件通信實現表單提交昨晚做了一個的例子，主要實現的是提交表單實現評論的功能，在做之前先簡單介紹一下。并稱為前端大框架，就目前來看，盡管發布了也在今年月份發布了，更不在話下，大家要是想學習的話可以去官網學習。 react組件通信實現表單提交昨晚做了一個react的例子，主要實現的是提交表單實現評論的功能，在做之前先簡單介紹一下React。 showImg(https://segment...

LoftySoul 2019-08-20 18:16 評論0 收藏0
一個播放器引發的思考——談談React跨組件通信

摘要：如果某個組件訂閱該事件太晚，那發布者之前所發布的該類事件，它都接收不到，而方案一和二的優點則在于，無論如何，組件都能拿到該的最終狀態值有存在內存泄漏的風險。原文地址 - 歡迎關注我的博客在我們react項目日常開發中，往往會遇到這樣一個問題：如何去實現跨組件通信？為了更好的理解此問題，接下來我們通過一個簡單的栗子說明。實現一個視頻播放器假設有一個這樣的需求，需要我們去實現一個...

Dean 2019-08-26 13:50 評論0 收藏0