在写 SDK 项目的时候碰到一个问题:在直播间初始化 SDK 时使用默认主题,在专题页初始化 SDK 时使用其它主题.默认主题在打包时挂在全局环境下供多个页面使用,定制主题需要在初始化 SDK 的时候传入.
实现起来很简单,判断是否有定制主题,有就使用定制主题,没有就使用默认主题.项目下的基本组件大多是这样的:
定制主题是通过初始化 SDK 传进来的,子组件可以通过 props 或者 context 拿到,但是却不能在 class 外的 styles 里面直接使用.
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>
)
}
那么如何实现在组件 "外" 使用父组件的 Props 呢?如果我们可以把需要使用的 Props 挂在 "全局环境" 下,那么不就可以随便使用了吗?
项目结构如下:
.
|——src
| |——lib //公用库
| |——services //抽离出的方法
| |——index.js
| └──App
| └──app.js
└── ...
首先,在 services 中新建一个 customTheme.js 文件,内容如下:
在 index.js 文件中我们可以拿到初始化 SDK 时传入的定制主题对象,这里我们把这个对象存储到 customTheme.js 里的 value 中:
let value = {}
export
default() = >{
const setTheme = (initColor) = >{
value = initColor
}
const getTheme = () = >{
return value
}
return {
setTheme,
getTheme,
}
}
这样就可以在其它地方直接拿到 customTheme 的值了
import customTheme from './services/customTheme'
...
const setTheme = (customTheme() || {}).setTheme
setTheme && setTheme(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>
)
}/
来源: https://juejin.im/post/5a582b046fb9a01cb3161c22