Quelles sont les différentes méthodes de rendu de React ?

Les méthodes de rendu React incluent : 1. Rendu à l'aide d'expressions conditionnelles, adapté au rendu de deux composants ; 2. Rendu à l'aide de l'opérateur "&&", adapté au rendu avec ou sans composant ; 3. Utilisation du rendu de composants à sortie variable ; Utilisez des méthodes fonctionnelles pour générer des composants ou utilisez des composants fonctionnels pour le rendu.

L'environnement d'exploitation de ce tutoriel : système Windows 7, React version 17.0.1, ordinateur Dell G3.

Plusieurs façons de rendu conditionnel des composants React

1. Rendu d'expression conditionnelle (applicable au rendu de deux composants)

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

2. Rendu de l'opérateur && (applicable Rendu selon qu'un Le composant existe ou non)

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. Utilisez des variables pour générer le rendu des composants (adapté au rendu avec plusieurs composants dans diverses conditions)

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. Utilisez des méthodes fonctionnelles pour générer des composants ou utiliser des expressions fonctionnelles. applicable aux situations où plusieurs sous-composants doivent être générés en fonction de conditions complexes)

1 Approche fonctionnelle

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>
    );
  }

2.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!