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

資訊專欄INFORMATION COLUMN

React之組件通信

binta / 2817人閱讀

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

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

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 = "我來自父組件"  //這個也是父傳子方法，可能初學(xué)者有點迷，剛開始我也用來和arr = {this.state.arr}做區(qū)分
  };
  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的循環(huán)
                            return (
                                
  • 
                                    {item.userName} 評論是:{item.text}
                                
    • 
                            )
                        })
                    }
                

           

        );
    };
}

export default Ele;

結(jié)果顯示：

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

子傳父：
首先是子組件：

import React, { Component } from "react";

class Ele extends Component{
    constructor(props){
       super(props);
       this.state = ({
            childText: "我來自子組件"
       })  
    };
    clickFun(text) {  //定義觸發(fā)的方法
        this.props.pfn(text)//這個地方把值傳遞給了props的事件當(dāng)中
    }
    render(){
        return (
           
               
                {/* 通過事件進行傳值，如果想得到event，可以在參數(shù)最后加一個event，
                這個地方還是要強調(diào)，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: "現(xiàn)在是父組件",     
  };
  fn(data) {
    this.setState({
        parentText: data //把父組件中的parentText替換為子組件傳遞的值
    },() =>{
       console.log(this.state.parentText);//setState是異步操作，但是我們可以在它的回調(diào)函數(shù)里面進行操作
    });
  };
  render() {
    return (
      

         {/*通過綁定事件進行值的運算，這個地方一定要記得.bind(this)，不然會報錯，切記切記，因為通過事件傳遞的時候this的指向已經(jīng)改變 */}
        
text is {this.state.parentText}

      

    );
  }
}
export default App;

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

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

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

相關(guān)文章

  • 我學(xué)react之父子組件通信

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

    wwolf 評論0 收藏0

  • react與redux通信之hook

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

    lemon 評論0 收藏0

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

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

    yeooo 評論0 收藏0

  • react組件通信實現(xiàn)表單提交

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

    LoftySoul 評論0 收藏0

  • 一個播放器引發(fā)的思考——談?wù)?em>React跨組件通信

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

    Dean 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<