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=&#39;styles.app&#39;></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=&#39;styles.app&#39;></p>
  )
}

上記は、私が皆さんのためにコンパイルしたものです。今後も皆様のお役に立ちますように。

関連記事:

VUE で bmob js-sdk を参照する (詳細なチュートリアル)

vue で v-for を介して配列を処理する方法

vue を使用してお気に入りを実装する方法

in ノード.jsでのnpmとwebpackの設定方法について

jsで現在時刻をフォーマットするにはどうすればよいですか？

以上がReactコンポーネントの「外」で親コンポーネントを使用する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。