Heim > Artikel > Web-Frontend > Welche verschiedenen Rendering-Methoden gibt es für React?
React-Rendering-Methoden umfassen: 1. Rendering mit bedingten Ausdrücken, geeignet für das Rendering von zwei Komponenten 2. Rendering mit dem „&&“-Operator, geeignet für das Rendering mit oder ohne Komponente 3. Verwendung der variablen Ausgabe Komponenten-Rendering; Verwenden Sie funktionale Methoden zur Ausgabe von Komponenten oder verwenden Sie funktionale Komponenten zum Rendern.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Reaktionsversion 17.0.1, Dell G3-Computer.
Mehrere Möglichkeiten zum bedingten Rendern von React-Komponenten
1. Bedingtes Ausdrucksrendering (anwendbar für das Rendern von zwei Komponenten)
render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> {isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )} </div> ); }
2. && Operator-Rendering (anwendbar) Rendern basierend darauf, ob a Komponente existiert oder nicht)
function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> ); }
3. Verwenden Sie Variablen zum Rendern von Komponenten (geeignet für das Rendern mit mehreren Komponenten unter verschiedenen Bedingungen)
render() { const isLoggedIn = this.state.isLoggedIn; const button = isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> ); return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ); }
4. Verwenden Sie funktionale Methoden, um Komponenten auszugeben, oder verwenden Sie funktionale Ausdrücke. anwendbar auf Situationen, in denen mehrere Unterkomponenten basierend auf komplexen Bedingungen ausgegeben werden müssen)
1. Funktionsansatz
renderButton(){ const isLoggedIn = this.state.isLoggedIn; if(isLoggedIn) { return (<LogoutButton onClick={this.handleLogoutClick} />); } else { return (<LoginButton onClick={this.handleLoginClick} />); } } render() { return ( <div> <Greeting /> {this.renderButton()} </div> ); }
[Verwandte Empfehlungen:
Redis-Video-TutorialDas obige ist der detaillierte Inhalt vonWelche verschiedenen Rendering-Methoden gibt es für React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!