Heim  >  Artikel  >  Web-Frontend  >  Welche verschiedenen Rendering-Methoden gibt es für React?

Welche verschiedenen Rendering-Methoden gibt es für React?

青灯夜游
青灯夜游Original
2022-03-22 14:06:312948Durchsuche

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.

Welche verschiedenen Rendering-Methoden gibt es für React?

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-Tutorial

]

Das 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!

Stellungnahme:
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