Heim > Web-Frontend > js-Tutorial > Hauptteil

Requisiten-Grundlagen: Teil 1

Patricia Arquette
Freigeben: 2024-10-04 10:59:30
Original
339 Leute haben es durchsucht

Dies ist ein anfängerfreundliches Tutorial zum Umgang mit Requisiten. Es ist wichtig, dass Sie verstehen, was Destrukturierung ist und wie Sie Komponenten verwenden/erstellen, bevor Sie lesen.

Props, kurz für Eigenschaften, Props ermöglichen es uns, Informationen von übergeordneten Komponenten an untergeordnete Komponenten zu senden. Es ist auch wichtig zu beachten, dass es sich dabei um beliebige Datentypen handeln kann.

Es ist unbedingt erforderlich, die Syntax zum Erstellen einer Requisite für eine Ihrer Komponenten zu verstehen. In React müssen Sie dieselbe Syntax zum Schreiben eines Attributs für ein HTML-Tag verwenden. Wir spezifizieren eine Requisite, indem wir sie wie folgt in unser Element einfügen:


ParentPlant() {
  return <ChildPlant text="Hey Farmer! Says plant" number={2} isPlant={true} /> 
}


Nach dem Login kopieren

Eine gute Regel, die Sie beim Erstellen von Requisiten beachten sollten, ist: Strings müssen keine geschweiften Klammern um ihren Wert haben, wir tun dies nur für andere Datentypen. Wie Sie oben sehen können, können wir eine Vielzahl von Requisiten haben, indem wir sie der übergeordneten Komponente zuweisen. Wenn wir unsere Requisiten in unserer Komponente haben, ist es wichtig zu wissen, dass wir sie technisch gesehen weitergeben. Sobald wir unsere Requisiten weitergeben, müssen wir in der Lage sein, sie innerhalb unserer gewünschten Komponente zu empfangen. In diesem Fall unsere ChildPlant-Komponente.

Requisiten erhalten:


function ChildPlant(props) {
  return (
    <>
      {props.text} {props.number}
    </>
  )
}


Nach dem Login kopieren

Wir machen hier folgende Dinge: 1. Wir empfangen unsere Requisite innerhalb des Parameters unserer ChildPlant-Komponente, 2. Wir zerstören die Werte unserer Requisite über den Namen unserer Requisite. Es ist wichtig zu wissen, dass unsere Requisiten kein ein Parameter sind, sondern vielmehr ähnliche Funktionen wie ein Parameter haben.

Die einzige Möglichkeit, Daten der übergeordneten Komponente an die untergeordnete Komponente weiterzugeben, sind Requisiten. Ich stelle es mir gerne wie DNA vor, eine übergeordnete Komponente enthält Aspekte von sich selbst, die bereits in ihr vorhanden sind. Da dieses Kind auch Aspekte der DNA seiner Eltern haben kann, wirken Requisiten wie der Aktivator, der die Haare dieses Kindes rot, schwarz oder blond macht.

Requisiten werden in der untergeordneten Funktion empfangen und über die übergeordnete Funktion gesendet, Requisiten können jedoch nur nach unten und niemals wieder nach oben gesendet werden. Wir können uns Requisiten auch als Objekte vorstellen. Dies liegt daran, dass sie im Wesentlichen Daten enthalten, die Schlüssel-Wert-Paaren ähneln. Um noch einmal darauf zurückzukommen, warum sie Parametern ähnlich sind: Sie speichern mehrere Objekte in sich. Ich stelle mir den Bereich, in dem Requisiten aufgenommen werden, gerne als Platzhalter vor. Sie nehmen Platz für ein Objekt ein, das wir mit unserer Komponente teilen möchten, und tauschen es bei Bedarf durch Destrukturierung und Punktnotation aus.

Hier ist eine gute Möglichkeit, es zu visualisieren:

Props Basics: Part 1

Hier können wir uns Requisiten vorstellen, die alles in unseren quadratischen Kästchen enthalten, wobei jedes seinen jeweiligen Datenwert aus unserem ersten Beispiel enthält. Jetzt verwenden wir einfach unsere Destrukturierungsmethode, um den Wert unserer Requisite zu ermitteln. Und so nutzen Sie Requisiten auf den Punkt gebracht!

Das obige ist der detaillierte Inhalt vonRequisiten-Grundlagen: Teil 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!