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

最新推荐文章于 2025-12-20 12:23:55 发布

转载最新推荐文章于 2025-12-20 12:23:55 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000012814066

文章标签：

#javascript #ViewUI

本文介绍了一种在React项目中灵活使用默认主题和定制主题的方法。通过将定制主题存储在一个可全局访问的对象中，使得即使在组件外部也能方便地应用定制主题。

在写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...