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

資訊專欄INFORMATION COLUMN

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

wwolf / 1168人閱讀

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

react父子組件通信

react父子間通信的幾種情況

父組件向子組件通信

子組件向父組件通信

跨級組件通信

兄弟組件通信

父組件向子組件通信

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

? 父組件代碼

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

子組件向父組件通信

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

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

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

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

代碼如下

父組件

跨級組件通信

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

代碼

最頭部的父組件

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

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

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

  render () {
    return (
      

        

        

      

    )
  }
}

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

子組件如何訪問

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

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

    )
  }
}

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

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

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

相關(guān)文章

  • Vue 組件間通信方式

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

    hss01248 評論0 收藏0

  • React之組件通信

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

    binta 評論0 收藏0

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

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

    CoderBear 評論0 收藏0

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

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

    oliverhuang 評論0 收藏0

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

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

    kamushin233 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<