详解如何在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 相关文章推荐
ASP.NET中AJAX 调用实例代码
May 03 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
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压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
python实现代理服务功能实例
2013/11/15 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python基础教程项目二之画幅好画
2018/04/02 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
奶茶专卖店创业计划书
2014/01/18 职场文书
学历证明范文
2015/06/16 职场文书
党性修养心得体会2016
2016/01/21 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书