详解如何在React组件“外”使用父组件的Props
在写SDK项目的时候碰到一个问题：在直播间初始化SDK时使用默认主题，在专题页初始化SDK时使用其它主题。默认主题在打包时挂在全局环境下供多个页面使用，定制主题需要在初始化SDK的时候传入。
实现起来很简单，判断是否有定制主题，有就使用定制主题，没有就使用默认主题。项目下的基本组件大多是这样的：
import{h,Component}from'lib/preact'
importcsjsfrom'lib/csjs'
import{theme}from'lib/platform'
conststyles=csjs`
.app{
background:${theme.color};
}
`
exportdefaultclassAppextendsComponent{
render(
定制主题是通过初始化SDK传进来的，子组件可以通过props或者context拿到，但是却不能在class外的styles里面直接使用。
那么如何实现在组件“外”使用父组件的Props呢？如果我们可以把需要使用的Props挂在“全局环境”下，那么不就可以随便使用了吗？
项目结构如下：
. |——src ||——lib//公用库 ||——services//抽离出的方法 ||——index.js |└──App |└──app.js └──...
首先，在services中新建一个customTheme.js文件，内容如下：
letvalue={}
exportdefault()=>{
constsetTheme=(initColor)=>{
value=initColor
}
constgetTheme=()=>{
returnvalue
}
return{
setTheme,
getTheme,
}
}
在index.js文件中我们可以拿到初始化SDK时传入的定制主题对象，这里我们把这个对象存储到customTheme.js里的value中：
importcustomThemefrom'./services/customTheme'
...
constsetTheme=(customTheme()||{}).setTheme
setTheme&&setTheme(customTheme)
...
这样就可以在其它地方直接拿到customTheme的值了
import{h,Component}from'lib/preact'
importcsjsfrom'lib/csjs'
import{theme}from'lib/platform'
importcustomThemefrom'../services/customTheme'
constgetTheme=(customTheme()||{}).getTheme
constcustom_theme=getTheme&&getTheme()
conststyles=csjs`
.app{
background:${custom_theme.color||theme.color};
}
`
exportdefaultclassAppextendsComponent{
render(
哈哈，就是这么简单，分享给跟我一样的菜鸟们，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。