So verwenden Sie die Requisiten einer übergeordneten Komponente „außerhalb“ einer React-Komponente

In diesem Artikel wird hauptsächlich detailliert beschrieben, wie die Requisiten der übergeordneten Komponente „außerhalb“ der React-Komponente verwendet werden. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Beim Schreiben eines SDK-Projekts ist ein Problem aufgetreten: Verwenden Sie beim Initialisieren des SDK im Live-Übertragungsraum das Standardthema und beim Initialisieren des SDK auf der Themenseite andere Themen. Das Standarddesign wird beim Packen in der globalen Umgebung eingehängt, damit es von mehreren Seiten verwendet werden kann. Benutzerdefinierte Designs müssen bei der Initialisierung des SDK übergeben werden.

Die Implementierung ist sehr einfach. Wenn ja, verwenden Sie das benutzerdefinierte Design. Die meisten Grundkomponenten des Projekts sind wie folgt:

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

Das benutzerdefinierte Thema wird über das Initialisierungs-SDK übergeben, und die Unterkomponente kann über abgerufen werden Requisiten oder Kontext, aber nicht. Es kann nicht direkt in Stilen außerhalb der Klasse verwendet werden.

Wie nutzt man also die Props der übergeordneten Komponente „außerhalb“ der Komponente? Wenn wir die Requisiten, die wir verwenden müssen, in der „globalen Umgebung“ aufhängen können, können wir sie dann nicht beiläufig verwenden?

Die Projektstruktur ist wie folgt:

.
|——src
| |——lib //公用库
| |——services //抽离出的方法
| |——index.js
| └──App
|   └──app.js
└── ...

Erstellen Sie zunächst eine neue Datei „customTheme.js“ in Diensten mit folgendem Inhalt:

let value = {}

export default () => {

 const setTheme = (initColor) => {
  value = initColor
 }

 const getTheme = () => {
  return value
 }

 return {
  setTheme,
  getTheme,
 }
}

In der Datei index.js können wir das benutzerdefinierte Designobjekt erhalten, das beim Initialisieren des SDK übergeben wird. Hier speichern wir dieses Objekt im Wert in customTheme.js:

import customTheme from './services/customTheme'

...

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

...

Auf diese Weise können Sie den Wert von customTheme direkt an anderen Orten nutzen

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

Verwandt Empfehlungen:

Speicher zur Optimierung von React-Komponenten verwenden

Was ist die Lebenszyklusfunktion der React-Komponente

Reaktionskomponente Beispiele für die Kommunikation zwischen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Requisiten einer übergeordneten Komponente „außerhalb“ einer React-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!