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

資訊專欄INFORMATION COLUMN

如何在React組件“外”使用父組件的Props？

ThreeWords / 1937人閱讀

摘要：默認(rèn)主題在打包時(shí)掛在全局環(huán)境下供多個(gè)頁(yè)面使用，定制主題需要在初始化的時(shí)候傳入。項(xiàng)目下的基本組件大多是這樣的定制主題是通過(guò)初始化傳進(jìn)來(lái)的，子組件可以通過(guò)或者拿到，但是卻不能在外的里面直接使用。

????在寫(xiě)SDK項(xiàng)目的時(shí)候碰到一個(gè)問(wèn)題：在直播間初始化SDK時(shí)使用默認(rèn)主題，在專題頁(yè)初始化SDK時(shí)使用其它主題。默認(rèn)主題在打包時(shí)掛在全局環(huán)境下供多個(gè)頁(yè)面使用，定制主題需要在初始化SDK的時(shí)候傳入。

????實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，判斷是否有定制主題，有就使用定制主題，沒(méi)有就使用默認(rèn)主題。項(xiàng)目下的基本組件大多是這樣的：

import { h, Component } from "lib/preact"
import csjs from "lib/csjs"
import { theme } from "lib/platform"

const styles = csjs`
    .app {
        background: ${theme.color};
    }
`

export default class App extends Component {
    render(
        

    )
}

????定制主題是通過(guò)初始化SDK傳進(jìn)來(lái)的，子組件可以通過(guò)props或者context拿到，但是卻不能在class外的styles里面直接使用。

????那么如何實(shí)現(xiàn)在組件“外”使用父組件的Props呢？如果我們可以把需要使用的Props掛在“全局環(huán)境”下，那么不就可以隨便使用了嗎？

項(xiàng)目結(jié)構(gòu)如下：

.
|——src
|  |——lib //公用庫(kù)
|  |——services //抽離出的方法
|  |——index.js
|  └──App
|      └──app.js
└── ...

????首先，在services中新建一個(gè)customTheme.js文件，內(nèi)容如下：

let value = {}

export default () => {

  const setTheme = (initColor) => {
    value = initColor
  }

  const getTheme = () => {
    return value
  }

  return {
    setTheme,
    getTheme,
  }
}

????在index.js文件中我們可以拿到初始化SDK時(shí)傳入的定制主題對(duì)象，這里我們把這個(gè)對(duì)象存儲(chǔ)到customTheme.js里的value中：

import customTheme from "./services/customTheme"

...

const setTheme = (customTheme() || {}).setTheme
setTheme && setTheme(customTheme)

...

????這樣就可以在其它地方直接拿到customTheme的值了

import { h, Component } from "lib/preact"
import csjs from "lib/csjs"
import { theme } from "lib/platform"
import customTheme from "../services/customTheme"

const getTheme = (customTheme() || {}).getTheme
const custom_theme = getTheme && getTheme()

const styles = csjs`
    .app {
        background: ${custom_theme.color || theme.color};
    }
`

export default class App extends Component {
    render(
        

    )
}

????哈哈，就是這么簡(jiǎn)單，分享給跟我一樣的菜鳥(niǎo)們。?

原文鏈接：http://codesnote.com/react_pr...

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

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

相關(guān)文章

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

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

    wwolf 評(píng)論0 收藏0

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

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

    Anshiii 評(píng)論0 收藏0

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

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

    brianway 評(píng)論0 收藏0

  • React 深入系列3：Props 和 State

    摘要：深入系列，深入講解了中的重點(diǎn)概念特性和模式等，旨在幫助大家加深對(duì)的理解，以及在項(xiàng)目中更加靈活地使用。下篇預(yù)告深入系列組件的生命周期我的新書(shū)進(jìn)階之路已上市，請(qǐng)大家多多支持鏈接京東當(dāng)當(dāng) React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對(duì)React的理解，以及在項(xiàng)目中更加靈活地使用React。 React 的核心思想是組件化的思想，而React 組件的定...

    hiyayiji 評(píng)論0 收藏0

  • React 深入系列３：Props 和 State

    摘要：當(dāng)真正執(zhí)行狀態(tài)修改時(shí)，依賴的并不能保證是最新的，因?yàn)闀?huì)把多次的修改合并成一次，這時(shí)，還是等于這幾次修改發(fā)生前的。下篇預(yù)告深入系列組件的生命周期新書(shū)推薦進(jìn)階之路作者徐超畢業(yè)于浙江大學(xué)，碩士，資深前端工程師，長(zhǎng)期就職于能源物聯(lián)網(wǎng)公司遠(yuǎn)景智能。 文：徐超，《React進(jìn)階之路》作者授權(quán)發(fā)布，轉(zhuǎn)載請(qǐng)注明作者及出處 React 深入系列3：Props 和 State React 深入系列，深...

    endiat 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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