详解如何在React组件“外”使用父组件的Props

在写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>
  )
}

哈哈，就是这么简单，分享给跟我一样的菜鸟们，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。