Requisiten und Requisitentypen in React beherrschen

Verwirren dich Props und PropTypes? Du bist nicht allein. Ich werde Sie durch alles über Props und PropTypes führen. Sie können Ihnen das Leben bei der Entwicklung von React-Apps erheblich erleichtern. Dieses Tutorial führt Sie in die Details über Requisiten, das Übergeben und Zugreifen auf Requisiten und das Übergeben von Informationen an jede Komponente ein, die Requisiten verwendet.

Das Erstellen von React-Anwendungen beinhaltet das Aufteilen der Benutzeroberfläche in mehrere Komponenten, was bedeutet, dass wir Daten von einer Komponente zur anderen weitergeben müssen. Props sind ein wichtiger Mechanismus, um Informationen zwischen React-Komponenten zu übertragen, und wir werden sie sehr detailliert untersuchen. Dieser Artikel wäre unvollständig, ohne sich mit PropTypes zu befassen, da sie sicherstellen, dass Komponenten den richtigen Datentyp verwenden und die richtigen Daten übergeben.

Es ist immer eine gute Praxis, die Daten, die wir als Requisiten erhalten, mithilfe von PropTypes zu validieren. Sie erfahren auch, wie Sie PropTypes in React integrieren, mit PropTypes Typprüfungen durchführen und defaultProps verwenden. Am Ende dieses Tutorials werden Sie verstehen, wie Sie Requisiten und PropTypes effektiv verwenden. Es ist wichtig, dass Sie bereits Grundkenntnisse über die Funktionsweise von React haben.

Requisiten verstehen

React ermöglicht es uns, Informationen an Komponenten zu übergeben, indem wir Props (kurz für Eigenschaften) verwenden. Da React mehrere Komponenten umfasst, ermöglichen Requisiten, dieselben Daten über die Komponenten hinweg zu teilen, die sie benötigen. Es nutzt einen unidirektionalen Datenfluss (Eltern-zu-Kind-Komponenten). Mit einer Callback-Funktion ist es jedoch möglich, Requisiten von einer untergeordneten an eine übergeordnete Komponente zurückzugeben.

Diese Daten können in verschiedenen Formen vorliegen: Zahlen, Strings, Arrays, Funktionen, Objekte usw. Wir können Props an jede Komponente übergeben, genauso wie wir Attribute in jedem HTML-Tag deklarieren können. Schauen Sie sich den folgenden Code an:

 <PostList posts={postsList} />

In diesem Ausschnitt übergeben wir eine Requisite namens posts an eine Komponente namens PostList . Diese Eigenschaft hat einen Wert von {postsList} . Lassen Sie uns aufschlüsseln, wie auf Daten zugegriffen und diese weitergegeben werden.

Passieren und Zugreifen auf Requisiten

Um dieses Tutorial interessant zu machen, erstellen wir eine Anwendung, die eine Liste mit Benutzernamen und Beiträgen anzeigt. Die App-Demo ist unten dargestellt:

Die App umfasst Sammlungen von Komponenten: eine App -Komponente, eine PostList Komponente und eine Post -Komponente .

Die Liste der Posts erfordert Daten wie den content und den name des Benutzers. Wir können die Daten so konstruieren:

 const postsList = [ { id: 1, content: "The world will be out of the pandemic soon", user: "Lola Lilly", }, { id: 2, content: "I'm really exited I'm getting married soon", user: "Rebecca Smith", }, { id: 3, content: "What is your take on this pandemic", user: "John Doe", }, { id: 4, content: "Is the world really coming to an end", user: "David Mark", }, ];

Danach benötigen wir die App -Komponente, um die Daten abzurufen. Hier ist die Grundstruktur dieser Komponente:

 const App = () => { return ( <div> <PostList posts={postsList} /> </div> ); };

Hier übergeben wir ein Array von Posts als Requisite an die PostList (die wir gleich erstellen werden). Die übergeordnete Komponente, PostList , greift auf die Daten in postsList zu, die als posts -Requisiten an die untergeordnete Komponente ( Post ) übergeben werden. Wenn Sie sich erinnern, besteht unsere App aus drei Komponenten, die wir im weiteren Verlauf erstellen werden.

Lassen Sie uns die PostList erstellen:

 class PostList extends React.Component { render() { return ( <React.Fragment> <h1>Latest Users Posts</h1> <ul> {this.props.posts.map((post) => { return ( <li key={post.id}> <Post {...post} /> </li> ); })} </ul> </React.Fragment> ); } }

Die PostList Komponente erhält posts als Prop. Anschließend durchläuft es die posts -Prop, this.props.posts , um jedes gepostete Element als Post -Komponente zurückzugeben (die wir später modellieren werden). Beachten Sie auch die Verwendung des key im obigen Snippet. Für diejenigen, die neu bei React sind, ist ein Schlüssel eine eindeutige Kennung, die jedem Element in unserer Liste zugewiesen wird und es uns ermöglicht, zwischen Elementen zu unterscheiden. In diesem Fall ist der Schlüssel die id jedes Beitrags. Es besteht keine Chance, dass zwei Elemente dieselbe id haben, daher ist es ein gutes Datenelement, das für diesen Zweck verwendet werden kann.

In der Zwischenzeit werden die verbleibenden Eigenschaften als Requisiten an die Post Komponente ( <Post {...post} /> ) übergeben.

Lassen Sie uns also die Post -Komponente erstellen und die darin enthaltenen Requisiten verwenden:

 const Post = (props) => { return ( <div> <h2>{props.content}</h2> <h4>username: {props.user}</h4> </div> ); };

Wir konstruieren die Post -Komponente als funktionale Komponente, anstatt sie als Klassenkomponente zu definieren, wie wir es für die PostList -Komponente getan haben. Ich habe dies getan, um Ihnen zu zeigen, wie Sie in einer funktionalen Komponente auf Props zugreifen, im Vergleich dazu, wie wir mit this.props in einer Klassenkomponente darauf zugreifen . Da es sich um eine funktionale Komponente handelt, können wir mit props auf die Werte zugreifen .

Wir haben jetzt gelernt, wie man Requisiten übergibt und auf sie zugreift, und auch, wie man Informationen von einer Komponente zur anderen weitergibt. Betrachten wir nun, wie Requisiten mit Funktionen arbeiten.

Übergeben von Funktionen über Props

Im vorangegangenen Abschnitt haben wir ein Array von Daten als Requisiten von einer Komponente an eine andere übergeben. Aber was, wenn wir stattdessen mit Funktionen arbeiten? React ermöglicht es uns, Funktionen zwischen Komponenten zu übergeben. Dies ist praktisch, wenn wir eine Zustandsänderung in einer übergeordneten Komponente von ihrer untergeordneten Komponente auslösen möchten. Requisiten sollen unveränderlich sein; Sie sollten nicht versuchen, den Wert einer Requisite zu ändern. Sie müssen dies in der Komponente tun, die es weitergibt, die die übergeordnete Komponente ist.

Lassen Sie uns eine einfache Demo-App erstellen, die auf ein Klickereignis lauscht und den Status der App ändert. Um den Status der App in einer anderen Komponente zu ändern, müssen wir unsere Funktion an die Komponente weitergeben, deren Status geändert werden muss. Auf diese Weise haben wir eine Funktion in unserer untergeordneten Komponente, die den Zustand ändern kann.

Klingt etwas kompliziert? Ich habe eine einfache React-Anwendung erstellt, die den Status mit einem Klick auf eine Schaltfläche ändert und eine willkommene Information darstellt:

In der obigen Demo haben wir zwei Komponenten. Eine davon ist die App -Komponente, die übergeordnete Komponente, die den Zustand der App und die Funktion zum Festlegen des Zustands enthält. Die ChildComponent ist in diesem Szenario das untergeordnete Element, und ihre Aufgabe besteht darin, die Begrüßungsinformationen zu rendern, wenn sich der Status ändert.

Lassen Sie uns dies in Code zerlegen:

 class App extends React.Component { constructor(props) { super(props); this.state = { isShow: true, }; } toggleShow = () => { this.setState((state) => ({ isShow: !state.isShow })); }; render() { return ( <div> <ChildComponent isShow={this.state.isShow} clickMe={this.toggleShow} /> </div> ); } }

Beachten Sie, dass wir unseren Status auf true gesetzt haben und die Methode zum Ändern des Status in der App -Komponente erstellt wird. In der Funktion render() übergeben wir den Status der App als Prop isShow an die ChildComponent -Komponente. Wir übergeben auch die Funktion toggleShow() als Prop namens clickMe .

Wir werden dies in der ChildComponent verwenden, die so aussieht:

 class ChildComponent extends React.Component { clickMe = () => { this.props.clickMe(); }; render() { const greeting = "Welcome to React Props"; return ( <div style={{ textAlign: "center", marginTop: "8rem" }}> {this.props.isShow ? ( <h1 style={{ color: "green", fontSize: "4rem" }}>{greeting}</h1> ) : null} <button onClick={this.clickMe}> <h3>click Me</h3> </button> </div> ); } }

Das Wichtigste oben ist, dass die App Komponente eine Funktion als Prop an die ChildComponent übergibt. Die Funktion clickMe() wird für den Click-Handler in der ChildComponent verwendet, wobei die ChildComponent die Logik der Funktion nicht kennt – sie löst die Funktion nur aus, wenn auf die Schaltfläche geklickt wird. Der Zustand wird geändert, wenn die Funktion aufgerufen wird, und sobald sich der Zustand geändert hat, wird der Zustand erneut als Stütze weitergegeben. Alle betroffenen Komponenten, wie in unserem Fall das Kind, werden erneut gerendert.

Wir müssen den Status der App, isShow , als Requisite an die ChildComponent übergeben, da wir ohne ihn die obige Logik nicht schreiben können, um eine greeting anzuzeigen, wenn der Status aktualisiert wird.

Nachdem wir uns jetzt die Funktionen angesehen haben, wenden wir uns der Validierung zu. Es ist immer eine gute Praxis, die Daten, die wir durch Requisiten erhalten, mithilfe von PropTypes zu validieren. Lassen Sie uns jetzt darauf eingehen.

Was sind PropTypes in React?

PropTypes sind ein Mechanismus, um sicherzustellen, dass Komponenten den richtigen Datentyp verwenden und die richtigen Daten übergeben, und dass Komponenten den richtigen Typ von Requisiten verwenden und dass empfangende Komponenten den richtigen Typ von Requisiten erhalten.

Wir können uns das wie einen Welpen vorstellen, der in eine Zoohandlung geliefert wird. Die Tierhandlung will keine Schweine, Löwen, Frösche oder Geckos – sie will Welpen. PropTypes stellen sicher, dass der richtige Datentyp (Welpe) an die Zoohandlung geliefert wird und nicht irgendeine andere Tierart.

Im obigen Abschnitt haben wir gesehen, wie man Informationen mithilfe von Requisiten an eine beliebige Komponente weitergibt. Wir haben Requisiten direkt als Attribut an die Komponente übergeben, und wir haben auch Requisiten von außerhalb der Komponente übergeben und sie in dieser Komponente verwendet. Aber wir haben nicht überprüft, welche Art von Werten wir in unserer Komponente durch Props bekommen oder ob alles noch funktioniert.

Es liegt ganz bei uns, ob wir die Daten validieren, die wir in einer Komponente durch Requisiten erhalten. Aber in einer komplexen Anwendung ist es immer eine gute Praxis, diese Daten zu validieren.

Verwenden von PropTypes

Um PropTypes zu verwenden, müssen wir das Paket als Abhängigkeit zu unserer Anwendung über npm oder Yarn hinzufügen, indem wir den folgenden Code in der Befehlszeile ausführen. Für npm:

 npm install --save prop-types

Und zum Garn:

 yarn add prop-types

Um PropTypes zu verwenden, müssen wir zunächst PropTypes aus dem Prop-Types-Paket importieren:

 import PropTypes from 'prop-types';

Lassen Sie uns ProTypes in unserer App verwenden, die die Beiträge der Benutzer auflistet. So werden wir es für die Post Komponente verwenden:

 Post.proptypes = { id: PropTypes.number, content: PropTypes.string, user: PropTypes.string }

Hier sind PropTypes.string und PropTypes.number Prop-Validatoren, die verwendet werden können, um sicherzustellen, dass die empfangenen Props vom richtigen Typ sind. Im obigen Code deklarieren wir id als Zahl, während content und user Strings sein sollen.

Außerdem sind PropTypes nützlich, um Fehler zu finden. Und wir können das Passieren von Requisiten erzwingen, indem wir isRequired verwenden:

 Post.proptypes = { id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, user: PropTypes.string.isRequired }

PropTypes haben viele Validatoren. Hier sind einige der häufigsten:

 Component.proptypes = { stringProp: PropTypes.string, // The prop should be a string numberProp: PropTypes.number, // The prop should be a number anyProp: PropTypes.any, // The prop can be of any data type booleanProp: PropTypes.bool, // The prop should be a function functionProp: PropTypes.func // The prop should be a function arrayProp: PropTypes.array // The prop should be an array }

Es sind weitere Typen verfügbar, die Sie in der Dokumentation von React nachlesen können].

Standard-Requisiten

Wenn wir mithilfe von Props einige Standardinformationen an unsere Komponenten übergeben möchten, ermöglicht uns React dies mit etwas namens defaultProps . In Fällen, in denen PropTypes optional sind (d. h. isRequired nicht verwenden), können wir defaultProps . Standardprops stellen sicher, dass Props einen Wert haben, falls nichts übergeben wird. Hier ist ein Beispiel:

 Class Profile extends React.Component{ // Specifies the default values for props static defaultProps = { name: 'Stranger' }; // Renders "Welcome, Stranger": render() { return <h2> Welcome, {this.props.name}<h2> } }

Hier wird defaultProps verwendet, um sicherzustellen, dass this.props.name einen Wert hat, falls er nicht von der übergeordneten Komponente angegeben wird. Wenn der Klasse Profile kein Name übergeben wird, hat sie die Standardeigenschaft Stranger , auf die sie zurückgreifen kann. Dies verhindert jeden Fehler, wenn keine Stütze übergeben wird. Ich rate Ihnen, immer defaultProps für jeden optionalen PropType zu verwenden.

Fazit

Ich hoffe, es hat Ihnen Spaß gemacht, dieses Tutorial durchzuarbeiten. Hoffentlich hat es Ihnen gezeigt, wie wichtig Props und PropTypes für die Erstellung von React-Anwendungen sind, denn ohne sie wären wir nicht in der Lage, Daten zwischen Komponenten zu übertragen, wenn Interaktionen stattfinden. Sie sind ein zentraler Bestandteil der komponentengesteuerten und Zustandsverwaltungsarchitektur, um die herum React entwickelt wurde.

PropTypes sind ein Bonus, um sicherzustellen, dass Komponenten den richtigen Datentyp verwenden und die richtigen Daten übergeben, und dass Komponenten den richtigen Prop-Typ verwenden und dass empfangende Komponenten den richtigen Prop-Typ erhalten.

Wenn Sie Fragen haben, können Sie diese unten im Kommentarbereich hinterlassen, und ich beantworte gerne alle Fragen und bearbeite alle Probleme mit Ihnen.

Verweise

• „Denken in Reaktion“, React Docs
• „Liste und Schlüssel“, React Docs
• „Typprüfung mit PropTypes“, React Docs
• „Wie man Requisiten an Komponenten in React übergibt“, Robin Wieruch