ホームページ  >  記事  >  ウェブフロントエンド  >  Reactコンポーネントの「外」で親コンポーネントを使用する方法の詳細な説明

Reactコンポーネントの「外」で親コンポーネントを使用する方法の詳細な説明

亚连
亚连オリジナル
2018-06-12 11:49:141379ブラウズ

この記事では主に 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 &#39;./services/customTheme&#39;

...

const setTheme = (customTheme() || {}).setTheme
setTheme && setTheme(customTheme)

...

この方法で、他の場所にあるcustomThemeの値を直接取得できます

import { h, Component } from &#39;lib/preact&#39;
import csjs from &#39;lib/csjs&#39;
import { theme } from &#39;lib/platform&#39;
import customTheme from &#39;../services/customTheme&#39;
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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。