溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在寫SDK項目的時候碰到一個問題：在直播間初始化SDK時使用默認主題，在專題頁初始化SDK時使用其它主題。默認主題在打包時掛在全局環境下供多個頁面使用，定制主題需要在初始化SDK的時候傳入。
實現起來很簡單，判斷是否有定制主題，有就使用定制主題，沒有就使用默認主題。項目下的基本組件大多是這樣的：
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(
<div className='styles.app'></div>
)
}
定制主題是通過初始化SDK傳進來的，子組件可以通過props或者context拿到，但是卻不能在class外的styles里面直接使用。
那么如何實現在組件“外”使用父組件的Props呢？如果我們可以把需要使用的Props掛在“全局環境”下，那么不就可以隨便使用了嗎？
項目結構如下：
. |——src | |——lib //公用庫 | |——services //抽離出的方法 | |——index.js | └──App | └──app.js └── ...
首先，在services中新建一個customTheme.js文件，內容如下：
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(
<div className='styles.app'></div>
)
}
哈哈，就是這么簡單，分享給跟我一樣的菜鳥們，以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
