Est-il possible d'utiliser des instructions if...else... dans les fonctions de rendu React ?

Question

Fondamentalement, j'ai un composant de réaction dont le corps de la fonction render() est le suivant : (C'est mon idéal, ce qui signifie qu'il ne fonctionne pas actuellement)< ;

render(){
    retour (
        

            <Élément1/>
            <Élément2/>

            // remarque : logique uniquement, le code ne fonctionne pas ici
            if (this.props.hasImage) 
            sinon 

        
    )
}
≪/pré>

Answer 1

Il existe en fait un moyen de faire exactement ce que le PO a demandé. Rendu et appelez simplement la fonction anonyme comme ceci :

render () {
  return (
    <div>
      {(() => {
        if (someCase) {
          return (
            <div>someCase</div>
          )
        } else if (otherCase) {
          return (
            <div>otherCase</div>
          )
        } else {
          return (
            <div>catch all</div>
          )
        }
      })()}
    </div>
  )
}

Answer 2

Pas exactement la même chose, mais il existe une solution de contournement. Il y a une section sur le rendu conditionnel dans la Documentation React que vous devriez consulter. Ce qui suit est un exemple de ce que vous pouvez faire en utilisant if-else en ligne.

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

Vous pouvez également le gérer dans la fonction de rendu, mais avant de renvoyer jsx.

if (isLoggedIn) {
  button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
  button = <LoginButton onClick={this.handleLoginClick} />;
}

return (
  <div>
    <Greeting isLoggedIn={isLoggedIn} />
    {button}
  </div>
);

Il convient également de mentionner ce que ZekeDroid a évoqué dans les commentaires. Si vous vérifiez simplement une condition et que vous ne souhaitez pas afficher un extrait spécifique qui ne remplit pas la condition, vous pouvez utiliser && 运算符.

return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );