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