在寫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() || {}).setThemesetTheme && 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() || {}).getThemeconst 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> )}哈哈，就是這么簡單，分享給跟我一樣的菜鳥們，以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
