Ausführliche Erklärung zur Verwendung übergeordneter Komponenten „außerhalb“ von React-Komponenten

In diesem Artikel wird hauptsächlich detailliert beschrieben, wie die Requisiten der übergeordneten Komponente „außerhalb“ der React-Komponente verwendet werden. Jetzt teile ich sie mit Ihnen und gebe Ihnen eine Referenz.

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.

Es ist sehr einfach festzustellen, ob es ein benutzerdefiniertes Design gibt. Wenn nicht, verwenden Sie das Standarddesign. 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. Die Unterkomponenten können über Requisiten oder Kontext abgerufen werden, sie können jedoch nicht direkt in Stilen verwendet werden außerhalb der Klasse.

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 customTheme.js-Datei in Diensten mit folgendem Inhalt:

let value = {}

export default () => {

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

 const getTheme = () => {
  return value
 }

 return {
  setTheme,
  getTheme,
 }
}

In der index.js-Datei haben wir Sie können die Initialisierung des benutzerdefinierten Designobjekts erhalten, das beim SDK übergeben wurde. 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 Stellen abrufen

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Bezug auf bmob js-sdk in VUE (ausführliches Tutorial)

So übergeben Sie v-for in Vue Arrays verarbeiten

So implementieren Sie Favoriten mit Vue

Informationen zu NPM- und Webpack-Konfigurationsmethoden in node.js

Wie formatiere ich die aktuelle Zeit mit js?

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung übergeordneter Komponenten „außerhalb“ von React-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!