React Bedingtes Rendern

In React können Sie verschiedene Komponenten erstellen, um die verschiedenen Verhaltensweisen zu kapseln, die Sie benötigen. Basierend auf Änderungen im Anwendungszustand können Sie dann nur einige davon rendern.

Bedingtes Rendern in React funktioniert genauso wie in JavaScript. Verwenden Sie JavaScript-Operatoren wie if oder den Bedingungsoperator, um Elemente zu erstellen, die den aktuellen Zustand darstellen, und lassen Sie dann React die UI basierend darauf aktualisieren.

Schauen wir uns zunächst zwei Komponenten an:

function UserGreeting(props) {
  return <h1>欢迎回来!</h1>;
}

function GuestGreeting(props) {
  return <h1>请先注册。</h1>;
}

Wir werden eine Greeting-Komponente erstellen, die abhängig davon, ob der Benutzer angemeldet ist, eine davon anzeigt:

React-Beispiel

function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( //Versuchen Sie, isLoggedIn={true} zu ändern: <Greeting isLoggedIn={false} /> );

Ausprobieren »

Elementvariablen

Man kann Variablen verwenden, um Elemente zu speichern. Das kann helfen, einen Teil der Komponente bedingt zu rendern, während der Rest der Ausgabe unverändert bleibt.

Im folgenden Beispiel erstellen wir eine zustandsbehaftete Komponente namens LoginControl.

Es wird basierend auf dem aktuellen Zustand<LoginButton />oder<LogoutButton />rendern, und es wird außerdem das ... aus dem vorherigen Beispiel rendern.<Greeting />。

React-Beispiel

class LoginControl extends React.Component { constructor(props) { super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = {isLoggedIn: false}; } handleLoginClick() { this.setState({isLoggedIn: true}); } handleLogoutClick() { this.setState({isLoggedIn: false}); } render() { const isLoggedIn = this.state.isLoggedIn; let button = null; if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <LoginControl /> );

Ausprobieren »

UND-Operator &&

Man kann jeden Ausdruck in JSX einbetten, indem man ihn in geschweifte Klammern einschließt, einschließlich des logischen UND && von JavaScript, mit dem man ein Element bequem bedingt rendern kann.

React-Beispiel

function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hallo!</h1> {unreadMessages.length > 0 && <h2> Du hast{unreadMessages.length}ungelesene Nachrichten. </h2> } </div> ); } const messages = ['React', 'Re: React', 'Re:Re: React']; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <Mailbox unreadMessages={messages} /> );

Ausprobieren »

In JavaScript,true && expressiongibt immerexpressionzurück, währendfalse && expression gibt immerfalse zurück。

Deshalb wird, wenn die Bedingungtrue，&&ist, das Element auf der rechten Seite gerendert; wenn siefalseist, ignoriert React es und überspringt es.

Ternär

Eine andere Methode für bedingtes Rendern ist die Verwendung des bedingten Operators von JavaScript:

condition ? true : false.

Im folgenden Beispiel verwenden wir ihn, um ein kleines Stück Text bedingt zu rendern.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

Es kann auch in größeren Ausdrücken verwendet werden, obwohl es nicht sehr intuitiv ist:

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

Verhindern des Renderns von Komponenten

In seltenen Fällen möchten Sie vielleicht eine Komponente ausblenden, obwohl sie von einer anderen Komponente gerendert wird. Sie können dies erreichen, indem die render-Methode null anstelle ihres Renderergebnisses zurückgibt.

Im folgenden Beispiel,<WarningBanner />rendert die Komponente bedingt basierend auf dem Wert der Prop warn. Wenn der Wert von warn false ist, wird die Komponente nicht gerendert:

React-Beispiel

function WarningBanner(props) { if (!props.warn) { return null; } return ( <div className="warning"> Warnung! </div> ); } class Page extends React.Component { constructor(props) { super(props); this.state = {showWarning: true} this.handleToggleClick = this.handleToggleClick.bind(this); } handleToggleClick() { this.setState(prevState => ({ showWarning: !prevState.showWarning })); } render() { return ( <div> <WarningBanner warn={this.state.showWarning} /> <button onClick={this.handleToggleClick}> {this.state.showWarning ? 'Ausblenden' : 'Anzeigen'} </button> </div> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <Page /> );

Ausprobieren »

Das Zurückgeben von null aus der render-Methode einer Komponente wirkt sich nicht auf die Callbacks der Lifecycle-Methoden der Komponente aus. Zum Beispiel können componentWillUpdate und componentDidUpdate weiterhin aufgerufen werden.

Andere Erweiterungen