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

前端之家收集整理的这篇文章主要介绍了详解如何在React组件“外”使用父组件的Props前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在写SDK项目的时候碰到一个问题:在直播间初始化SDK时使用默认主题,在专题页初始化SDK时使用其它主题。默认主题在打包时挂在全局环境下供多个页面使用,定制主题需要在初始化SDK的时候传入。

实现起来很简单,判断是否有定制主题,有就使用定制主题,没有就使用默认主题。项目下的基本组件大多是这样的:

const styles = csjs .app { background: ${theme.color}; }

export default class App extends Component {
render(

) }

定制主题是通过初始化SDK传进来的,子组件可以通过props或者context拿到,但是却不能在class外的styles里面直接使用。

那么如何实现在组件“外”使用父组件的Props呢?如果我们可以把需要使用的Props挂在“全局环境”下,那么不就可以随便使用了吗?

项目结构如下:

方法 | |——index.js | └──App | └──app.js └── ...

首先,在services中新建一个customTheme.js文件内容如下:

export default () => {

const setTheme = (initColor) => {
value = initColor
}

const getTheme = () => {
return value
}

return {
setTheme,getTheme,}
}

在index.js文件中我们可以拿到初始化SDK时传入的定制主题对象,这里我们把这个对象存储到customTheme.js里的value中:

...

const setTheme = (customTheme() || {}).setTheme
setTheme && setTheme(customTheme)

...

这样就可以在其它地方直接拿到customTheme的值了

) }

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

原文链接:https://www.f2er.com/js/34190.html

猜你在找的JavaScript相关文章