React コンポーネントの「外部」で親コンポーネントの Props を使用する方法-jsチュートリアル-php.cn

この記事では、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( 
 ) }

ログイン後にコピー

カスタムテーマは初期化 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( 
 ) }

ログイン後にコピー