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

    哈哈，就是這麼簡單，分享給跟我同樣的菜鳥們。?

原文連接： http://codesnote.com/react_pr...