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


Posted in Javascript onJanuary 12, 2018

在写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>
  )
}

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

Javascript 相关文章推荐
CSS和Javascript简单复习资料
Jun 29 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 #Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 #Javascript
js 索引下标之li集合绑定点击事件
Jan 12 #Javascript
简单的Vue SSR的示例代码
Jan 12 #Javascript
详解如何在react中搭建d3力导向图
Jan 12 #Javascript
关于axios不能使用Vue.use()浅析
Jan 12 #Javascript
Vuex 进阶之模块化组织详解
Jan 12 #Javascript
You might like
PHP安装问题
2006/10/09 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
js实现日期级联效果
2014/01/23 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
Javascript window对象详解
2014/11/12 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
理解JS事件循环
2016/01/07 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
Python中unittest用法实例
2014/09/25 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
Django入门使用示例
2017/12/12 Python
Python应用库大全总结
2018/05/30 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
开办化妆品公司创业计划书
2013/12/26 职场文书
晚会邀请函范文
2014/01/24 职场文书
医药销售求职信范文
2014/02/01 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL