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

2024-05-06 16:41:59

字体：大中小

来源：转载

供稿：网友

在写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() || {}).setThemesetTheme && 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() || {}).getThemeconst 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>  )}

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

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：深入理解ES6之数据解构的用法

下一篇：详解ES6语法之可迭代协议和迭代器协议