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

React コンポーネントの「外部」で親コンポーネントの Props を使用する方法

小云云オリジナル: 2018-01-15 09:12:131597ブラウズ

この記事では、React コンポーネントの「外側」で親コンポーネントの Props を使用する方法についての詳細な説明を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

SDK プロジェクトを作成するときに問題が発生しました。ライブブロードキャストルームで SDK を初期化するときにデフォルトのテーマを使用し、トピックページで SDK を初期化するときに他のテーマを使用します。デフォルトのテーマは、パッケージ化中にグローバル環境でハングされ、複数のページで使用できるように、SDK の初期化時にカスタマイズされたテーマを渡す必要があります。

実装は非常に簡単です。カスタマイズされたテーマがあるかどうかを確認します。存在しない場合は、デフォルトのテーマを使用します。プロジェクトの基本コンポーネントのほとんどは次のようになります:

import { h, Component } from &#39;lib/preact&#39;
import csjs from &#39;lib/csjs&#39;
import { theme } from &#39;lib/platform&#39;

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>
  )
}

React コンポーネントの「外部」で親コンポーネントの Props を使用する方法

関連記事