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

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

您可能感兴趣的文章:

  • React教程之Props验证的具体用法(Props Validation)
  • React-Native中props具体使用详解
时间: 2018-01-10

React-Native中props具体使用详解

props就是属性,是为了描述一个组件的特征而存在的.它是父组件传递给子组件的. 使用props 通过上一个页面传递 新建一个 PropsTest.js 文件 exprot default class PropsTestextendesComponent{ render(){ return <Text>{this.props.name}</Text> } } 在上一个页面中使用PropsTest组件 import PropsTest from './PropsTest' <P

React教程之Props验证的具体用法(Props Validation)

Props验证对于组件的正确使用是一种非常有用的方式.它可以避免随着你的应用的程序越来越复杂从而出现很多的bug和问题.并且,它还可以是你的程序变得更易读. 那如何对Props进行验证呢,其实很简单,React为我们提供了PropTypes以供验证使用.当我们向Props传入的数据无效(也就是向Props传入的数据类型和验证的数据类型不符)就会在控制台发出警告信息. 看下面的例子 var Propsva = React.createClass({ propTypes: { optionalArr

Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解

本文实例讲述了Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法.分享给大家供大家参考,具体如下: MVC结构中视图层和控制器的解耦,以及渲染.往往是重复或者冗余的工作.如果一个完善的框架,对MVC的使用,必定会对这些操作进行合理的设计.让开发者更专注内容而不是控制逻辑结构本身.在ZendFramework中,主要是通过动作助手ViewRenderer来完成这个操作的.ViewRenderer 自动的完成在控制器内建立视图对象并渲染视图的过程: Vie

Zend Framework教程之MVC框架的Controller用法分析

本文讲述了Zend Framework教程之MVC框架的Controller用法.分享给大家供大家参考,具体如下: 这里简单讲讲MVC模式中Controller的基本使用方法. 基本使用实例: root@coder-671T-M:/www/zf_demo1/application# tree. ├── Bootstrap.php ├── configs │   └── application.ini ├── controllers │   ├── ErrorController.php │  

ES6教程之for循环和Map,Set用法分析

本文实例讲述了ES6教程之for循环和Map,Set用法.分享给大家供大家参考,具体如下: 现在大家先想一想,如果要你遍历一个数组的元素,你会选择如何去做呢?一般都会想起for循环: for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } 可惜我得告诉你,这个方法是二十年的人才应该使用的方法,在ES5中已经提出了更为简便的forEach方法,代码如下: myArray.forEac

Zend Framework教程之Zend_Registry对象用法分析

本文实例讲述了Zend Framework教程之Zend_Registry对象用法.分享给大家供大家参考,具体如下: 使用对象注册表(Registry) 对象注册表(或称对象仓库)是一个用于在整个应用空间(application space)内存储对象和值的容器.通过把对象存储在其中,我们可以在整个项目的任何地方使用同一个对象.这种机制相当于一种全局存储. 我们可以通过Zend_Registry类的静态方法来使用对象注册表,另外,由于该类是一个数组对象,你可以使用数组形式来访问其中的类方法. 1

jQuery插件学习教程之SlidesJs轮播+Validation验证

SlidesJs(轮播支持触屏)--官网(http://slidesjs.com) 1.简介 SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件.支持键盘,触摸,css3转换. 2.代码 <!doctype html> <head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style> <script src="http:/

Zend Framework教程之Zend_Db_Table_Row用法实例分析

本文实例讲述了Zend Framework教程之Zend_Db_Table_Row用法.分享给大家供大家参考,具体如下: 1. 简介 Zend_Db_Table_Row是Zend Framework的行数据网关.通常来说,你不可以自己实例化Zend_Db_Table_Row, 而是通过调用Zend_Db_Table::find()方法或者Zend_Db_Table::fetchRow()方法将Zend_Db_Table_Row作为 结果数据返回过来.一旦你得到来一个Zend_Db_Table_R

Zend Framework入门教程之Zend_View组件用法示例

本文实例讲述了Zend Framework入门教程之Zend_View组件用法.分享给大家供大家参考,具体如下: Zend_View组件可以实现MVC模式中视图部分的代码与Model和Controller部分的分离. 使用步骤:首先在Controller中建立一个Zend_View实例,并将需要的变量传递给它:之后,Controller通知Zend_View显示一个特定的视图, 生成View输出的内容. 实例之控制器代码脚本: <?php //使用模型来获取书籍作者和标题相关数据 $data =

Zend Framework教程之Zend_Config_Ini用法分析

本文实例讲述了Zend Framework教程之Zend_Config_Ini用法.分享给大家供大家参考,具体如下: Zend_Config_Ini允许开发者通过嵌套的对象属性语法在应用程序中用熟悉的 INI 格式存储和读取配置数据.INI 格式在提供拥有配置数据键的等级结构和配置数据节之间的继承能力方面具有专长.配置数据等级结构通过用点或者句号 (.)分离键值.一个节可以扩展或者通过在节的名称之后带一个冒号(:)和被继承的配置数据的节的名称来从另一个节继承. parse_ini_file Ze

Zend Framework入门教程之Zend_Mail用法示例

本文实例讲述了Zend Framework入门教程之Zend_Mail用法.分享给大家供大家参考,具体如下: Zend_Mail组件提供了通用化的功能来创建和发送文本. Zend_Mail通过PHP内建的mail()函数或者直接通过SMTP连接来发送邮件. 一个简单的邮件由收件人.主题.邮件内容以及发件人等内容组成. 步骤如下 1.创建对象 2.设置邮件内容 3.发送 案例: <?php require_once "Zend/Mail.php"; $my_mail = new Z