更新时间： 2018-01-12     阅读次数：9

如何在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> ) 
}

    哈哈，就是这么简单，分享给跟我一样的菜鸟们。

分类: 技术分享 Tags: TechArticles