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

网友投稿 296 2023-02-27


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

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

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

import { h, Component } from 'lib/preact'

impojlzGopVert csjs from 'lib/csjs'

import { theme } from 'lib/platform'

const styles = csjs`

.app {

background: ${theme.color};

}

`

export default class App extends Component {

render(

)

}

定制主题是通过初始化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(

)

}


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:java文件上传至ftp服务器的方法
下一篇:开发者服务器接口地址(开发者服务器接口地址查询)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~