詳解如何在React組件“外”使用父組件的Props

更新時(shí)間：2018年01月12日 16:41:54 作者：麥的劍

這篇文章主要介紹了詳解如何在React組件“外”使用父組件的Props，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在寫SDK項(xiàng)目的時(shí)候碰到一個(gè)問(wèn)題：在直播間初始化SDK時(shí)使用默認(rèn)主題，在專題頁(yè)初始化SDK時(shí)使用其它主題。默認(rèn)主題在打包時(shí)掛在全局環(huán)境下供多個(gè)頁(yè)面使用，定制主題需要在初始化SDK的時(shí)候傳入。

實(shí)現(xiàn)起來(lái)很簡(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>
  )
}

定制主題是通過(guò)初始化SDK傳進(jìn)來(lái)的，子組件可以通過(guò)props或者context拿到，但是卻不能在class外的styles里面直接使用。

那么如何實(shí)現(xiàn)在組件“外”使用父組件的Props呢？如果我們可以把需要使用的Props掛在“全局環(huán)境”下，那么不就可以隨便使用了嗎？

項(xiàng)目結(jié)構(gòu)如下：

.
|——src
| |——lib //公用庫(kù)
| |——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

相關(guān)文章

React實(shí)現(xiàn)組件全屏化的操作方法
開發(fā)今天給我提了一個(gè)sql編輯器輸入框比較小，不支持放大，不太方便，下面看下我的處理方法，本文基于React+antd，給大家演示一個(gè)完整的全屏demo，感興趣的朋友一起看看吧
2021-10-10
react-router4 嵌套路由的使用方法
本篇文章主要介紹了react-router4 嵌套路由的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
nodejs和react實(shí)現(xiàn)即時(shí)通訊簡(jiǎn)易聊天室功能
這篇文章主要介紹了nodejs和react實(shí)現(xiàn)即時(shí)通訊簡(jiǎn)易聊天室功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-08-08
字節(jié)封裝React組件手機(jī)號(hào)自動(dòng)校驗(yàn)格式FormItem
這篇文章主要為大家介紹了字節(jié)封裝React組件手機(jī)號(hào)自動(dòng)校驗(yàn)格式FormItem，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
在react項(xiàng)目中使用antd的form組件,動(dòng)態(tài)設(shè)置input框的值
這篇文章主要介紹了在react項(xiàng)目中使用antd的form組件,動(dòng)態(tài)設(shè)置input框的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
React懶加載實(shí)現(xiàn)原理深入分析
懶加載意思是不會(huì)預(yù)加載，而是需要使用某段代碼，某個(gè)組件或者某張圖片時(shí)，才加載他們（延遲加載），這篇文章主要介紹了React懶加載實(shí)現(xiàn)原理
2022-11-11
React導(dǎo)入less及其注意事項(xiàng)說(shuō)明
在Vite構(gòu)建的React項(xiàng)目中,直接安裝和導(dǎo)入Less即可使用,但需注意的是,Less的樣式作用域不局限于模塊內(nèi)部,可能造成樣式污染,建議通過(guò)修改文件名和導(dǎo)入方式來(lái)避免此問(wèn)題
2024-11-11
如何將你的AngularJS1.x應(yīng)用遷移至React的方法
本篇文章主要介紹了如何將你的AngularJS1.x應(yīng)用遷移至React的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
詳解超簡(jiǎn)單的react服務(wù)器渲染(ssr)入坑指南
這篇文章主要介紹了詳解超簡(jiǎn)單的react服務(wù)器渲染(ssr)入坑指南，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
詳解Redux的工作流程
這篇文章主要介紹了Redux的工作流程,redux是一個(gè)專門用于做狀態(tài)管理的JS庫(kù)，它可以在react、angular、vue等項(xiàng)目中，但基本與react配合使用，需要的朋友可以參考下
2022-08-08