成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

我學react之父子組件通信

wwolf / 1227人閱讀

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

react父子組件通信

react父子間通信的幾種情況

父組件向子組件通信

子組件向父組件通信

跨級組件通信

兄弟組件通信

父組件向子組件通信

由于react是單向數(shù)據(jù)流向的，父組件一般通過props向子組件傳遞相關(guān)的一些信息
來看一下下面這個例子，在這里我封裝了一個modal組件，它的顯示與取消的狀態(tài)交由父組件來管理，它們之間的關(guān)系用一張圖表示
流程圖
代碼如下

? 父組件代碼

這樣子組件中的visible就被父組件接管了

子組件向父組件通信

子組件向父組件通信同樣需要父組件向子組件傳遞props，只是父組件傳遞的是是作用域為自己的函數(shù)，子組件調(diào)用次函數(shù)，并將子組件想要傳遞的信息，作為參數(shù)，傳遞到父組件的作用域中

還是以上面的這個例子距離，當打開模態(tài)框的時候，通過父組件的

showModal()方法，改變visible的值，通過props傳遞到子組件，

關(guān)閉模態(tài)框是由內(nèi)向外的。模態(tài)框在內(nèi)部改變visible的值在把它傳遞給外部的方法

代碼如下

父組件

跨級組件通信

通過context進行通信，我們可以把組件之間的關(guān)系想象成一個組件樹，原始的方法就是通過props一級一級的把狀態(tài)往下傳，在通過調(diào)用方法一級一級傳回去，另一種方法就是在他們之間設置一個區(qū)域，每個組件都可以訪問到，相當于父組件下的一個全局變量

代碼

最頭部的父組件

class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: "red" }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      

        

        

      

    )
  }
}

要在父組件設置這個context區(qū)域，在childContextTypes中設置允許子組件們訪問的變量的名稱，getChildContext（）會設置這個區(qū)域，這樣所有的子組件都可以訪問到themeColor這個參數(shù)了

子組件如何訪問

class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      
React.js 小書標題

    )
  }
}

通過在this.context的方式就可以訪問到了

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/102350.html

相關(guān)文章

  • Vue 組件間通信方式

    摘要：本身提供哪幾種通信方式首先靈感源于，支持雙向綁定，本質(zhì)還是單向數(shù)據(jù)流。跟一樣，組件間最基本的數(shù)據(jù)流是通過向子組件傳遞數(shù)據(jù)。但是在卻很少使用，因為組件可以自定義事件，即后面的組件間通信方式其實就是訂閱發(fā)布模式。 例子是在 jsrun.net 平臺編寫，不支持移動端平臺，所以本文建議在 PC 端進行閱讀。 Vue 是數(shù)據(jù)驅(qū)動的視圖框架，那么組件間的數(shù)據(jù)通信是必然的事情，那么組件間如何進行數(shù)...

    hss01248 評論0 收藏0

  • React之組件通信

    摘要：最近閑來無事自學框架，自學過程中所有的問題經(jīng)驗都會在此記錄，希望可以幫助到學習框架的同學廢話不多說上代碼。 最近閑來無事自學React框架，自學過程中所有的問題經(jīng)驗都會在此記錄，希望可以幫助到學習React框架的同學,廢話不多說上代碼。首先是父傳子： import React, { Component } from react; import Com1 from ./componmen...

    binta 評論0 收藏0

  • 解密傳統(tǒng)組件間通信與React組件間通信

    摘要：同時吸取了社區(qū)大量優(yōu)秀思想，進行歸納比對。有興趣的讀者可以點擊下面的鏈接購買，再次感謝各位的支持與鼓勵懇請各位批評指正京東當當原文網(wǎng)址 在React中最小的邏輯單元是組件，組件之間如果有耦合關(guān)系就會進行通信，本文將會介紹React中的組件通信的不同方式 通過歸納范，可以將任意組件間的通信歸類為四種類型的組件間通信，分別是父子組件，爺孫組件，兄弟組件和任意組件，需要注意的是前三個也可以算...

    CoderBear 評論0 收藏0

  • Hooks 與 React 生命周期的關(guān)系

    摘要：更新階段卸載階段兄弟節(jié)點之間的通信主要是經(jīng)過父組件和也是通過改變父組件傳遞下來的實現(xiàn)的，滿足的設計遵循單向數(shù)據(jù)流模型，因此任何兩個組件之間的通信，本質(zhì)上都可以歸結(jié)為父子組件更新的情況。 你真的了解 React 生命周期嗎？ React 生命周期很多人都了解，但通常我們所了解的都是 單個組件 的生命周期，但針對 Hooks 組件、多個關(guān)聯(lián)組件（父子組件和兄弟組件） 的生命周期又是怎么樣的...

    oliverhuang 評論0 收藏0

  • react開發(fā)教程（八）React組件通信

    摘要：父子組件通訊通訊手段這是最常見的通信方式，父組件只需要將子組件需要的傳給子組件，子組件直接通過來使用。 父子組件通訊 通訊手段這是最常見的通信方式，父組件只需要將子組件需要的props傳給子組件，子組件直接通過this.props來使用。通訊內(nèi)容更多要提的是如何合理的設置子組件的props，要想將子組件設計成一個復用性強的通用組件，需要將能夠復用的部分抽象出來，抽象出來的props有兩...

    kamushin233 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<