ホームページ > 記事 > ウェブフロントエンド > Reactコンポーネントの「外」で親コンポーネントを使用する方法の詳細な説明
この記事では主に React コンポーネントの「外側」で親コンポーネントの Props を使用する方法を詳しく紹介しますので、参考にしてください。
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( <p className='styles.app'></p> ) }
カスタマイズされたテーマは初期化 SDK を通じて渡されます。サブコンポーネントは props または context を通じて取得できますが、クラス外のスタイルで直接使用することはできません。
それでは、コンポーネントの「外側」で親コンポーネントの Props を使用するにはどうすればよいでしょうか? 「地球環境」で必要なPropsを吊るすことができれば、気軽に使えるようになるのではないだろうか?
プロジェクトの構造は次のとおりです:
. |——src | |——lib //公用库 | |——services //抽离出的方法 | |——index.js | └──App | └──app.js └── ...
まず、次の内容でサービスに新しいcustomTheme.jsファイルを作成します:
let value = {} export default () => { const setTheme = (initColor) => { value = initColor } const getTheme = () => { return value } return { setTheme, getTheme, } }
index.jsファイルでは、SDKの初期化時に渡されるカスタムテーマオブジェクトを取得できます。このオブジェクトは、customTheme.js の値に保存されます:
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( <p className='styles.app'></p> ) }
上記は、私が皆さんのためにコンパイルしたものです。今後も皆様のお役に立ちますように。
関連記事:
VUE で bmob js-sdk を参照する (詳細なチュートリアル)
in ノード.jsでのnpmとwebpackの設定方法について
以上がReactコンポーネントの「外」で親コンポーネントを使用する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。