亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2018年01月12日 16:41:54   作者：麥的劍  
這篇文章主要介紹了詳解如何在React組件“外”使用父組件的Props，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

實現(xiàn)起來很簡單，判斷是否有定制主題，有就使用定制主題，沒有就使用默認主題。項目下的基本組件大多是這樣的：

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里面直接使用。

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

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

.
|——src
| |——lib //公用庫
| |——services //抽離出的方法
| |——index.js
| └──App
|   └──app.js
└── ...

首先，在services中新建一個customTheme.js文件，內(nèi)容如下：

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

哈哈，就是這么簡單，分享給跟我一樣的菜鳥們，以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • React高階組件的使用淺析

    React高階組件的使用淺析

    高階組件就是接受一個組件作為參數(shù)并返回一個新組件（功能增強的組件）的函數(shù)。這里需要注意高階組件是一個函數(shù)，并不是組件，這一點一定要注意，本文給大家分享React高階組件使用小結(jié)，一起看看吧
    2022-08-08
  • React構(gòu)建簡潔強大可擴展的前端項目架構(gòu)

    React構(gòu)建簡潔強大可擴展的前端項目架構(gòu)

    這篇文章主要為大家介紹了React構(gòu)建簡潔強大可擴展的前端項目架構(gòu)實現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-08-08
  • 再次談?wù)揜eact.js實現(xiàn)原生js拖拽效果引起的一系列問題

    再次談?wù)揜eact.js實現(xiàn)原生js拖拽效果引起的一系列問題

    React 起源于 Facebook 的內(nèi)部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站.本文給大家介紹React.js實現(xiàn)原生js拖拽效果，需要的朋友一起學(xué)習(xí)吧
    2016-04-04
  • react中監(jiān)聽props的改變方式

    react中監(jiān)聽props的改變方式

    這篇文章主要介紹了react中監(jiān)聽props的改變方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • React 組件的狀態(tài)下移和內(nèi)容提升的操作方法

    React 組件的狀態(tài)下移和內(nèi)容提升的操作方法

    這篇文章主要介紹了React 組件的狀態(tài)下移和內(nèi)容提升,通過代碼講解了渲染性能的組件問題結(jié)合實例代碼給大家講解的非常詳細，需要的朋友可以參考下
    2022-11-11
  • sass在react中的基本使用(實例詳解)

    sass在react中的基本使用(實例詳解)

    這篇文章主要介紹了sass在react中的基本使用,主要包括安裝sass和編寫APP.tsx中的基本dom，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-09-09
  • 在React中如何優(yōu)雅的處理事件響應(yīng)詳解

    在React中如何優(yōu)雅的處理事件響應(yīng)詳解

    這篇文章主要給大家介紹了關(guān)于在React中如何優(yōu)雅處理事件響應(yīng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-07-07
  • React三大屬性之props的使用詳解

    React三大屬性之props的使用詳解

    這篇文章主要介紹了React三大屬性之props的使用詳解，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下
    2021-04-04
  • React報錯Element type is invalid解決案例

    React報錯Element type is invalid解決案例

    這篇文章主要為大家介紹了React報錯Element type is invalid解決案例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-12-12
  • 使用React hook實現(xiàn)remember me功能

    使用React hook實現(xiàn)remember me功能

    相信大家在使用 React 寫頁面的時候都遇到過完成 Remember me 的需求吧！本文就將這個需求封裝在一個 React hook 中以供后續(xù)的使用,覺得有用的同學(xué)可以收藏起來以備不時之需,感興趣的小伙伴跟著小編一起來看看吧
    2024-04-04

最新評論