詳解如何在React組件“外”使用父組件的Props
在寫SDK項(xiàng)目的時(shí)候碰到一個(gè)問題：在直播間初始化SDK時(shí)使用默認(rèn)主題，在專題頁初始化SDK時(shí)使用其它主題。默認(rèn)主題在打包時(shí)掛在全局環(huán)境下供多個(gè)頁面使用，定制主題需要在初始化SDK的時(shí)候傳入。
實(shí)現(xiàn)起來很簡(jiǎn)單，判斷是否有定制主題，有就使用定制主題，沒有就使用默認(rèn)主題。項(xiàng)目下的基本組件大多是這樣的：
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傳進(jìn)來的，子組件可以通過props或者context拿到，但是卻不能在class外的styles里面直接使用。
那么如何實(shí)現(xiàn)在組件“外”使用父組件的Props呢？如果我們可以把需要使用的Props掛在“全局環(huán)境”下，那么不就可以隨便使用了嗎？
項(xiàng)目結(jié)構(gòu)如下：
. |——src | |——lib //公用庫 | |——services //抽離出的方法 | |——index.js | └──App | └──app.js └── ...
首先，在services中新建一個(gè)customTheme.js文件，內(nèi)容如下：
let value = {}
export default () => {
const setTheme = (initColor) => {
value = initColor
}
const getTheme = () => {
return value
}
return {
setTheme,
getTheme,
}
}
在index.js文件中我們可以拿到初始化SDK時(shí)傳入的定制主題對(duì)象，這里我們把這個(gè)對(duì)象存儲(chǔ)到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>
)
}
哈哈，就是這么簡(jiǎn)單，分享給跟我一樣的菜鳥們，以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- react中props 的使用及進(jìn)行限制的方法
- React三大屬性之props的使用詳解
- ES6 class類鏈?zhǔn)嚼^承，實(shí)例化及react super(props)原理詳解
- react高階組件添加和刪除props
- React性能優(yōu)化系列之減少props改變的實(shí)現(xiàn)方法
- 使用react render props實(shí)現(xiàn)倒計(jì)時(shí)的示例代碼
- 談?wù)凴eact中的Render Props模式
- 詳解React中傳入組件的props改變時(shí)更新組件的幾種實(shí)現(xiàn)方法
- react 父子組件之間通訊props
- React props和state屬性的具體使用方法
- React教程之Props驗(yàn)證的具體用法（Props Validation）
- React-Native中props具體使用詳解
- 詳解React中Props的淺對(duì)比
相關(guān)文章
高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù)，并不是組件，這一點(diǎn)一定要注意，本文給大家分享React高階組件使用小結(jié)，一起看看吧2022-08-08
React構(gòu)建簡(jiǎn)潔強(qiáng)大可擴(kuò)展的前端項(xiàng)目架構(gòu)
這篇文章主要為大家介紹了React構(gòu)建簡(jiǎn)潔強(qiáng)大可擴(kuò)展的前端項(xiàng)目架構(gòu)實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
再次談?wù)揜eact.js實(shí)現(xiàn)原生js拖拽效果引起的一系列問題
React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站.本文給大家介紹React.js實(shí)現(xiàn)原生js拖拽效果，需要的朋友一起學(xué)習(xí)吧2016-04-04
這篇文章主要介紹了react中監(jiān)聽props的改變方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
React 組件的狀態(tài)下移和內(nèi)容提升的操作方法
這篇文章主要介紹了React 組件的狀態(tài)下移和內(nèi)容提升,通過代碼講解了渲染性能的組件問題結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了sass在react中的基本使用,主要包括安裝sass和編寫APP.tsx中的基本dom，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
在React中如何優(yōu)雅的處理事件響應(yīng)詳解
這篇文章主要給大家介紹了關(guān)于在React中如何優(yōu)雅處理事件響應(yīng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要介紹了React三大屬性之props的使用詳解，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
React報(bào)錯(cuò)Element type is invalid解決案例
這篇文章主要為大家介紹了React報(bào)錯(cuò)Element type is invalid解決案例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
使用React hook實(shí)現(xiàn)remember me功能
相信大家在使用 React 寫頁面的時(shí)候都遇到過完成 Remember me 的需求吧！本文就將這個(gè)需求封裝在一個(gè) React hook 中以供后續(xù)的使用,覺得有用的同學(xué)可以收藏起來以備不時(shí)之需,感興趣的小伙伴跟著小編一起來看看吧2024-04-04