Detaillierte Erläuterung des Komponenten-Renderings in React
Dieses Mal werde ich Ihnen die Verwendung des Komponenten-Renderings in React ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Komponenten-Renderings in React?
Komponentenrendering – bedingtes Rendering (dynamische Komponente)
In vielen Fällen werden Komponenten dynamisch gerendert, z. B. wenn Sie angemeldet sind, wird „abgemeldet“ angezeigt, andernfalls wird „angemeldet“ angezeigt in
import React from 'react' let Login = (props) => { return <input type="button" value="login" onClick={props.click}/>; } let Logout = (props) => { return <input type="button" value="logout" onClick={props.click}/>; } export default class CP extends React.Component{ state = { status: 0 } login(){ this.setState({status: 1}) } logout(){ this.setState({status: 0}) } render(){ let button = null; if(this.state.status == 0){ button = <Login click={this.login.bind(this)}/> } else { button = <Logout click={this.logout.bind(this)} /> } return <p>{button}</p> } }
Effektvorschau
Komponenten-Rendering – Listen-Rendering
React hat keine Anweisungen, daher müssen Sie ein Array verwenden, um das Listen-Rendering abzuschließen.
Listen-Rendering – einfache Implementierung von
import React from 'react' import ReactDOM from 'react-dom' let Component1 = () => { let lis = [<li key="Javascript">Javascript</li>, <li key="Vue">Vue</li>, <li key="React">React</li>] return ( <p> <ul> {lis} </ul> </p> ) } ReactDOM.render( <Component1 /> document.getElementById('app') )
Listen-Rendering – Schleife für
import React from 'react' import ReactDOM from 'react-dom' let Component1 = () => { let data = ['Javascript', 'Vue', 'React'] let lis = []; for(let frm of frms){ lis.push(<li key={frm}>{frm}</li>) } return ( <p> <ul> {lis} </ul> </p> ) } ReactDOM.render( <Component1 /> document.getElementById('app') )
Listen-Rendering – Schleifenkarte
import React from 'react' import ReactDOM from 'react-dom' let Component1 = () => { let data = ['Javascript', 'Vue', 'React'] let lis = data.map((frm) => { return <li key={frm}>{frm}</li> }); return ( <p> <ul> {lis} </ul> </p> ) } ReactDOM.render( <Component1 /> document.getElementById('app') )
Listen-Rendering – Objekt-Array
import React from 'react' import ReactDOM from 'react-dom' class Component1 extends React.Component { constructor(props){ super(props) } static defaultProps = { students: [ {id: 1, name: 'Tom', age: 18, gender: 1}, {id: 2, name: 'Sam', age: 22, gender: 1}, {id: 3, name: 'Lucy', age: 20, gender: 0} ] } getKeys(item = {}){ return Object.keys(item) } render(){ return ( <table> <thead> <tr> { this.getKeys(this.props.students[0]).map((key) => { return <th key={key}>{key}</th> }) } </tr> </thead> <tbody> { this.props.students.map((obj) => { return ( <tr key={obj.id}> { this.getKeys(obj).map((key, idx) => { return <td key={key + idx}>{obj[key]}</td> }) } </tr> ) }) } </tbody> </table> ) } } ReactDOM.render( <Component1 />, document.getElementById('app') )
Listen-Rendering – Schlüssel
Da React ein Prozess vom virtuellen DOM zum realen DOM ist und DOM selbst ein Objekt ist, hat das Objekt standardmäßig keine eindeutige Kennung, also muss es eine sein manuell durchgeführt angegeben.
Mit Hilfe von Tasten erkennt React, welche Elemente geändert, hinzugefügt oder entfernt wurden. Jedes Element im Array sollte durch einen eindeutigen und unveränderlichen Schlüssel identifiziert werden.
Schlüssel werden beim Rendern von Listen verwendet und müssen unter den Geschwisterelementen eindeutig sein.
Komponentenrendering – untergeordnete Komponentenknoten
Da die Komponente als DOM-Knoten aufgerufen wird, kann die Komponente untergeordnete Knoten enthalten. React erhält die untergeordneten Knoten einer Komponente über this.props.children
. Normalerweise treten bei this.props.children
die folgenden Situationen auf:
Wenn die aktuelle Komponente keine untergeordneten Knoten hat, ist sie undefiniert
Wenn es einen untergeordneten Knoten gibt, ist der Datentyp Objekt
Wenn es mehrere untergeordnete Knoten gibt, ist der Datentyp Array
Um diese Situation zu lösen, in der Datentypen inkonsistent sind und während der Verwendung eine ständige Beurteilung erfordern, stellt React eine Methode Reacth.Children
zur Handhabung dieses Attributs bereit.
var Component1 = React.createClass({ render: function(){ return ( <p> { React.Children.map(this.props.children, function(childNode){ return <li>{childNode}</li> }) } </p> ); } }) ReactDOM.render( <Component1> <span>Tom</span> <span>Sam</span> </Component1>, document.getElementById('p1'));
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erläuterung des Sortieralgorithmus-Beispiels im Frontend
Detaillierte Erläuterung der Implementierungsschritte von PromiseA+
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Komponenten-Renderings in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

CrystalDiskMark ist ein kleines HDD-Benchmark-Tool für Festplatten, das schnell sequentielle und zufällige Lese-/Schreibgeschwindigkeiten misst. Lassen Sie sich als Nächstes vom Redakteur CrystalDiskMark und die Verwendung von CrystalDiskMark vorstellen ). Zufällige I/O-Leistung. Es ist eine kostenlose Windows-Anwendung und bietet eine benutzerfreundliche Oberfläche und verschiedene Testmodi zur Bewertung verschiedener Aspekte der Festplattenleistung. Sie wird häufig in Hardware-Reviews verwendet

foobar2000 ist eine Software, die Ihnen jederzeit Musik aller Art mit verlustfreier Klangqualität bietet Spielen Sie das erweiterte Audio auf dem Computer ab, um ein bequemeres und effizienteres Musikwiedergabeerlebnis zu ermöglichen. Das Interface-Design ist einfach, klar und benutzerfreundlich. Es nimmt einen minimalistischen Designstil an, ohne übermäßige Dekoration Es unterstützt außerdem eine Vielzahl von Skins und Themes, personalisiert Einstellungen nach Ihren eigenen Vorlieben und erstellt einen exklusiven Musikplayer, der die Wiedergabe mehrerer Audioformate unterstützt. Außerdem unterstützt es die Audio-Gain-Funktion zum Anpassen der Lautstärke Passen Sie die Lautstärke entsprechend Ihrem Hörzustand an, um Hörschäden durch zu hohe Lautstärke zu vermeiden. Als nächstes lass mich dir helfen

Das Windows-Betriebssystem ist eines der beliebtesten Betriebssysteme der Welt und seine neue Version Win11 hat viel Aufmerksamkeit erregt. Im Win11-System ist die Erlangung von Administratorrechten ein wichtiger Vorgang. Mit Administratorrechten können Benutzer weitere Vorgänge und Einstellungen auf dem System durchführen. In diesem Artikel wird ausführlich beschrieben, wie Sie Administratorrechte im Win11-System erhalten und wie Sie Berechtigungen effektiv verwalten. Im Win11-System werden Administratorrechte in zwei Typen unterteilt: lokaler Administrator und Domänenadministrator. Ein lokaler Administrator verfügt über vollständige Administratorrechte für den lokalen Computer

NetEase Mailbox ist eine von chinesischen Internetnutzern weit verbreitete E-Mail-Adresse und hat mit seinen stabilen und effizienten Diensten schon immer das Vertrauen der Benutzer gewonnen. NetEase Mailbox Master ist eine E-Mail-Software, die speziell für Mobiltelefonbenutzer entwickelt wurde. Sie vereinfacht das Senden und Empfangen von E-Mails erheblich und macht unsere E-Mail-Verarbeitung komfortabler. Wie Sie NetEase Mailbox Master verwenden und welche spezifischen Funktionen es bietet, wird Ihnen der Herausgeber dieser Website im Folgenden ausführlich vorstellen und hofft, Ihnen weiterzuhelfen! Zunächst können Sie die NetEase Mailbox Master-App im Mobile App Store suchen und herunterladen. Suchen Sie im App Store oder im Baidu Mobile Assistant nach „NetEase Mailbox Master“ und befolgen Sie dann die Anweisungen zur Installation. Nachdem der Download und die Installation abgeschlossen sind, öffnen wir das NetEase-E-Mail-Konto und melden uns an. Die Anmeldeschnittstelle ist wie unten dargestellt

Cloud-Speicher sind heutzutage aus unserem täglichen Leben und Arbeiten nicht mehr wegzudenken. Als einer der führenden Cloud-Speicherdienste in China hat Baidu Netdisk mit seinen leistungsstarken Speicherfunktionen, der effizienten Übertragungsgeschwindigkeit und dem komfortablen Bedienerlebnis die Gunst einer großen Anzahl von Benutzern gewonnen. Und egal, ob Sie wichtige Dateien sichern, Informationen teilen, Videos online ansehen oder Musik hören möchten, Baidu Cloud Disk kann Ihre Anforderungen erfüllen. Viele Benutzer verstehen jedoch möglicherweise nicht die spezifische Verwendung der Baidu Netdisk-App. Dieses Tutorial führt Sie daher im Detail in die Verwendung der Baidu Netdisk-App ein. Wenn Sie immer noch verwirrt sind, folgen Sie bitte diesem Artikel, um mehr im Detail zu erfahren. So verwenden Sie Baidu Cloud Network Disk: 1. Installation Wählen Sie beim Herunterladen und Installieren der Baidu Cloud-Software zunächst die benutzerdefinierte Installationsoption aus.

Detaillierte Erläuterung der Divisionsoperation in OracleSQL In OracleSQL ist die Divisionsoperation eine häufige und wichtige mathematische Operation, die zur Berechnung des Ergebnisses der Division zweier Zahlen verwendet wird. Division wird häufig in Datenbankabfragen verwendet. Daher ist das Verständnis der Divisionsoperation und ihrer Verwendung in OracleSQL eine der wesentlichen Fähigkeiten für Datenbankentwickler. In diesem Artikel werden die relevanten Kenntnisse über Divisionsoperationen in OracleSQL ausführlich erörtert und spezifische Codebeispiele als Referenz für die Leser bereitgestellt. 1. Divisionsoperation in OracleSQL

MetaMask (auf Chinesisch auch Little Fox Wallet genannt) ist eine kostenlose und beliebte Verschlüsselungs-Wallet-Software. Derzeit unterstützt BTCC die Bindung an die MetaMask-Wallet. Nach der Bindung können Sie sich mit der MetaMask-Wallet schnell anmelden, Werte speichern, Münzen kaufen usw. und bei der erstmaligen Bindung einen Testbonus von 20 USDT erhalten. Im BTCCMetaMask-Wallet-Tutorial stellen wir detailliert vor, wie man MetaMask registriert und verwendet und wie man das Little Fox-Wallet in BTCC bindet und verwendet. Was ist die MetaMask-Wallet? Mit über 30 Millionen Nutzern ist MetaMask Little Fox Wallet heute eines der beliebtesten Kryptowährungs-Wallets. Die Nutzung ist kostenlos und kann als Erweiterung im Netzwerk installiert werden

Apple hat am Dienstag das iOS 17.4-Update veröffentlicht, das eine Reihe neuer Funktionen und Korrekturen für iPhones bringt. Das Update enthält neue Emojis und EU-Nutzer können diese auch aus anderen App-Stores herunterladen. Darüber hinaus stärkt das Update auch die Kontrolle der iPhone-Sicherheit und führt weitere Einstellungsoptionen für den „Schutz gestohlener Geräte“ ein, um Benutzern mehr Auswahl und Schutz zu bieten. „iOS17.3 führt zum ersten Mal die Funktion „Schutz vor gestohlenen Geräten“ ein, die den vertraulichen Informationen der Benutzer zusätzliche Sicherheit verleiht. Wenn der Benutzer nicht zu Hause oder an anderen vertrauten Orten ist, erfordert diese Funktion, dass der Benutzer zum ersten Mal biometrische Informationen eingibt Zeit und nach einer Stunde müssen Sie Informationen erneut eingeben, um auf bestimmte Daten zuzugreifen und diese zu ändern, z. B. um Ihr Apple-ID-Passwort zu ändern oder den Schutz vor gestohlenen Geräten zu deaktivieren.
