Kontext und Eigenschaften von React erklärt

1. Kontext

1. Anwendungsszenarien

Stellen Sie sich ein Szenario vor, in dem wir Werte an untergeordnete Komponenten übergeben möchten. Was sollen wir tun?

Wenn Sie Requisiten verwenden, um es Schicht für Schicht weiterzugeben, wird das sehr umständlich!

Eine bessere Möglichkeit: Nutzen Sie context , um uns bei der Datenübertragung zwischen Komponenten zu unterstützen

2. Nutzungsschritte

• Rufen Sie React.createContext() auf, um zwei Komponenten zu erstellen: Provider (stellt Daten bereit) und Consumer (verbraucht Daten).

const { Anbieter, Verbraucher } = React.createContext()

• Verwenden Sie die Providerkomponente als übergeordneten Knoten.

<Anbieter>
  <div Klassenname="App">
    <Kind1 />
  </div>
</Anbieter>

• Legen Sie das Wertattribut fest, um die zu übergebenden Daten anzugeben.

<Anbieterwert="pink">

• Rufen Sie die Consumer-Komponente auf, um Daten zu empfangen.

<Verbraucher>
  {data => <span>Der Datenparameter stellt die empfangenen Daten dar-- {data}</span>}
</Verbraucher>

3. Fazit

• Wenn zwei Komponenten in mehreren Ebenen verschachtelt sind, können Sie Context verwenden, um die Komponentenkommunikation zu implementieren
• Context bietet zwei Komponenten: Provider und Consumer
• Provider : Wird zur Bereitstellung von Daten verwendet
• Consumer : Wird zum Konsumieren von Daten verwendet

2. Requisiten im Detail

1. Das Eigentum der Kinder

Kinderattribut: stellt die untergeordneten Knoten des Komponenten-Tags dar. Wenn das Komponenten-Tag untergeordnete Knoten hat, haben die Requisiten dieses Attribut

Die Eigenschaft children ist die gleiche wie bei normalen Props und ihr Wert kann alles sein (Text, Beschriftungen, Komponenten oder sogar Funktionen).

Der Code lautet wie folgt (Beispiel):

Funktion Hallo(Requisiten) {
  zurückkehren (
    <div>
      Unterknoten der Komponente: {props.children}
    </div>
  )
}
<Hallo>Ich bin ein untergeordneter Knoten</Hallo>

2. Validierung der Requisiten

Bei Komponenten handelt es sich bei Props um einen Container für externe Daten und es gibt keine Garantie für das Format der von Komponentenbenutzern übergebenen Daten.

Wenn das Format der eingehenden Daten falsch ist, kann dies zu einem Fehler in der Komponente führen

Hauptproblem: Keine weiteren Fehlermeldungen außer Syntaxfehlermeldungen

Der Code lautet wie folgt (Beispiel):

// Erstellte Komponentenfunktion App(props) {
  const arr = props.farben
  const list = arr.map((Element, Index) => <li Schlüssel={index}>{Element}</li>)
  zurückkehren (
    <ul>{Liste}</ul>
  )
}
// Bei Verwendung von Komponenten <App colors={19} />

Props-Validierung : ermöglicht Ihnen, den Typ und das Format von Props beim Erstellen einer Komponente anzugeben

Zweck : Erfassen Sie Fehler, die durch Requisiten bei der Verwendung von Komponenten verursacht werden, geben Sie klare Fehleraufforderungen aus und erhöhen Sie die Robustheit der Komponenten

3. Schritte zur Verwendung der Props-Validierung

• Installieren Sie Prop-Typen (npm i prop-types)
• Importieren Sie das Prop-Types-Paket
• Verwenden Sie component name.propTypes = {}, um Validierungsregeln zu Komponenteneigenschaften hinzuzufügen
• Validierungsregeln werden über das PropTypes-Objekt angegeben

Importiere PropTypes aus „Prop-Types“
Funktion App(Requisiten) {
  zurückkehren (
    <h1>Hallo, {props.colors}</h1>
  )
}
App.propTypes = {
  // Es wird vereinbart, dass die Eigenschaft colors vom Typ array ist // Wenn der Typ falsch ist, wird ein eindeutiger Fehler gemeldet, um die Fehleranalyse zu erleichtern colors: PropTypes.array
}

4. Regeln für die Einschränkung bei der Validierung von Requisiten

Gängige Typen: number , string , array , bool , func , object

React-Elementtyp: element

Erforderlich: isRequired erforderlich

Objekte einer bestimmten Struktur: shape({ })

// Allgemeiner Typ optionalFunc: PropTypes.func,
// Erforderliche Funktion: PropTypes.func.isRequired,
// Objekt mit spezifischer Struktur optionalObjectWithShape: PropTypes.shape({
  Farbe: PropTypes.string,
  Schriftgröße: PropTypes.number
})

5. Standardmäßige Requisitenwerte

Szenario : Paginierungskomponente → Anzahl der pro Seite angezeigten Elemente

Funktion : Legen Sie Standardwerte für Requisiten fest, die wirksam werden, wenn keine Requisiten übergeben werden

Funktion App(Requisiten) {
  zurückkehren (
    <div>
      Der Standardwert von Props wird hier angezeigt: {props.pageSize}
    </div>
  )
}
//Standardwerte festlegen App.defaultProps = {
  Seitengröße: 10
}
// Übergeben Sie nicht das pageSize-Attribut <App />

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!