資訊專欄INFORMATION COLUMN
摘要：默認主題在打包時掛在全局環(huán)境下供多個頁面使用，定制主題需要在初始化的時候傳入。項目下的基本組件大多是這樣的定制主題是通過初始化傳進來的，子組件可以通過或者拿到，但是卻不能在外的里面直接使用。
????在寫SDK項目的時候碰到一個問題：在直播間初始化SDK時使用默認主題，在專題頁初始化SDK時使用其它主題。默認主題在打包時掛在全局環(huán)境下供多個頁面使用，定制主題需要在初始化SDK的時候傳入。
????實現(xiàn)起來很簡單，判斷是否有定制主題，有就使用定制主題，沒有就使用默認主題。項目下的基本組件大多是這樣的：
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(
)
}
????定制主題是通過初始化SDK傳進來的，子組件可以通過props或者context拿到，但是卻不能在class外的styles里面直接使用。
????那么如何實現(xiàn)在組件“外”使用父組件的Props呢？如果我們可以把需要使用的Props掛在“全局環(huán)境”下，那么不就可以隨便使用了嗎？
項目結(jié)構(gòu)如下：
. |——src | |——lib //公用庫 | |——services //抽離出的方法 | |——index.js | └──App | └──app.js └── ...
????首先，在services中新建一個customTheme.js文件，內(nèi)容如下：
let value = {}
export default () => {
const setTheme = (initColor) => {
value = initColor
}
const getTheme = () => {
return value
}
return {
setTheme,
getTheme,
}
}
????在index.js文件中我們可以拿到初始化SDK時傳入的定制主題對象，這里我們把這個對象存儲到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(
)
}
????哈哈，就是這么簡單，分享給跟我一樣的菜鳥們。?
原文鏈接：http://codesnote.com/react_pr...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92431.html
摘要：父子組件通信父子間通信的幾種情況父組件向子組件通信子組件向父組件通信跨級組件通信兄弟組件通信父組件向子組件通信由于是單向數(shù)據(jù)流向的，父組件一般通過向子組件傳遞相關(guān)的一些信息來看一下下面這個例子，在這里我封裝了一個組件，它的顯示與取消的狀態(tài)交 react父子組件通信 react父子間通信的幾種情況 父組件向子組件通信 子組件向父組件通信 跨級組件通信 兄弟組件通信 父組件向子組件通信...
摘要：在使用的過程中，不可避免的需要組件間進行消息傳遞通信，組件間通信大體有下面幾種情況父組件向子組件通信子組件向父組件通信非嵌套組件間通信跨級組件之間通信父組件向子組件通信父組件通過向子組件傳遞，子組件得到后進行相應的處理。 在使用 React 的過程中，不可避免的需要組件間進行消息傳遞（通信），組件間通信大體有下面幾種情況： 父組件向子組件通信 子組件向父組件通信 非嵌套組件間通信 跨...
摘要：在使用的過程中，不可避免的需要組件間進行消息傳遞通信，組件間通信大體有下面幾種情況父組件向子組件通信子組件向父組件通信非嵌套組件間通信跨級組件之間通信父組件向子組件通信父組件通過向子組件傳遞，子組件得到后進行相應的處理。 在使用 React 的過程中，不可避免的需要組件間進行消息傳遞（通信），組件間通信大體有下面幾種情況： 父組件向子組件通信 子組件向父組件通信 非嵌套組件間通信 跨...
摘要：深入系列，深入講解了中的重點概念特性和模式等，旨在幫助大家加深對的理解，以及在項目中更加靈活地使用。下篇預告深入系列組件的生命周期我的新書進階之路已上市，請大家多多支持鏈接京東當當 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 React 的核心思想是組件化的思想，而React 組件的定...
摘要：當真正執(zhí)行狀態(tài)修改時，依賴的并不能保證是最新的，因為會把多次的修改合并成一次，這時，還是等于這幾次修改發(fā)生前的。下篇預告深入系列組件的生命周期新書推薦進階之路作者徐超畢業(yè)于浙江大學，碩士，資深前端工程師，長期就職于能源物聯(lián)網(wǎng)公司遠景智能。 文：徐超，《React進階之路》作者授權(quán)發(fā)布，轉(zhuǎn)載請注明作者及出處 React 深入系列3：Props 和 State React 深入系列，深...
閱讀 2703·2023-04-25 19:13
閱讀 4042·2021-09-22 15:34
閱讀 3061·2019-08-30 14:23
閱讀 1470·2019-08-29 17:17
閱讀 1611·2019-08-29 16:05
閱讀 1544·2019-08-29 13:26
閱讀 1223·2019-08-29 13:19
閱讀 561·2019-08-29 13:16
