时间:2021-05-25
在写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> )}哈哈,就是这么简单,分享给跟我一样的菜鸟们,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1、父组件向子组件传值父组件向子组件传值一般采用props属性传递父组件:importReactfrom'react'importChildfrom'./Chi
本文介绍了React子组件向父组件传值的方法,分享给大家子组件需要控制自己的state,然后告诉父组件自己的state,通过props调用父组件中用来控制sta
父组件如何给子组件传值使用props举个例子:子组件:fromTest.vue,父组件app.vuefromTest.vue{{title}}//title必须
通讯是单向的,数据必须是由一方传到另一方。1.父组件与子组件间的通信。在React中,父组件可以向子组件通过传props的方式,向子组件进行通讯。父组件App.
在react中,父组件的重新render会引发子组件的重新render,但是一些情况下我们会觉得这样做有些多余,比如:父组件并未传递props给子组件新传递的p