如何在React元件「外」使用父元件的Props?

2021-09-14 02:59:02 字數 1567 閱讀 9121

在寫sdk專案的時候碰到乙個問題:在直播間初始化sdk時使用預設主題,在專題頁初始化sdk時使用其它主題。預設主題在打包時掛在全域性環境下供多個頁面使用,定製主題需要在初始化sdk的時候傳入。

實現起來很簡單,判斷是否有定製主題,有就使用定製主題,沒有就使用預設主題。專案下的基本元件大多是這樣的:

import  from 'lib/preact'

import csjs from 'lib/csjs'

import from 'lib/platform'

const styles = csjs`

background: $;

}` render(

)}

定製主題是通過初始化sdk傳進來的,子元件可以通過props或者context拿到,但是卻不能在class外的styles裡面直接使用。

那麼如何實現在元件「外」使用父元件的props呢?如果我們可以把需要使用的props掛在「全域性環境」下,那麼不就可以隨便使用了嗎?

專案結構如下:

.

|——src

| |——lib //公用庫

| |——services //抽離出的方法

| |——index.js

└── ...

首先,在services中新建乙個customtheme.js檔案,內容如下:

let value = {}

export default () =>

const gettheme = () =>

return

}

index.js檔案中我們可以拿到初始化sdk時傳入的定製主題物件,這裡我們把這個物件儲存到customtheme.js裡的value中:

import customtheme from './services/customtheme'

...const settheme = (customtheme() || {}).settheme

settheme && settheme(customtheme)

...

這樣就可以在其它地方直接拿到customtheme的值了

import  from 'lib/preact'

import csjs from 'lib/csjs'

import from 'lib/platform'

import customtheme from '../services/customtheme'

const gettheme = (customtheme() || {}).gettheme

const custom_theme = gettheme && gettheme()

const styles = csjs`

background: $;

}` render(

)}

哈哈,就是這麼簡單,分享給跟我一樣的菜鳥們。?

如何在django系統外使用django的ORM

有時候我們希望在乙個新的獨立指令碼裡面使用django的orm系統。例如我曾在乙個django專案裡面,用tornado單獨實現了其中的im 即時通訊 功能。如果直接import django的models的話,會出現以下錯誤 django.core.exceptions.improperlycon...

Vue 如何在父元件中使用子元件

首先簡單回顧一下定義元件用到的引數。components 定義乙個新的元件 template 書寫元件中的html內容,用一對 括起來 首先一開始,先寫一下子元件的內容,因為要多次呼叫所以賦給了變數child var child 接下來,寫一下父元件的內容,同時在父元件中使用到了子元件,所以加入了c...

react子元件如何向父元件傳值

黑色框為父,綠色框為子,紅色框為孫子。父向子孫傳值用props 子孫向父傳值,要在父設定接收函式和state,同時用props將函式名傳入子孫。總的來說就是給子元件傳入父元件的方法,在子元件中呼叫 男 男 女 女 select var child react.createclass this.pro...