Les instructions if...else... peuvent-elles être utilisées dans les fonctions de rendu React ?

Question

En gros, j'ai un composant de réaction avec un corps de fonction render() comme celui-ci : (C'est mon composant idéal, ce qui signifie qu'il ne fonctionne pas actuellement)

render(){
    return (
        <div>
            <Element1/>
            <Element2/>

            // note: logic only, code does not work here
            if (this.props.hasImage) <ElementWithImage/>
            else <ElementWithoutImage/>

        </div>
    )
}

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 (
    

      {(() => {
        if (someCase) {
          return (
            
someCase
          )
        } else if (otherCase) {
          return (
            
otherCase
          )
        } else {
          return (
            
catch all
          )
        }
      })()}
    
  )
}

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 (
    

      {isLoggedIn ? (
        
      ) : (
        
      )}
    
  );
}

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

if (isLoggedIn) {
  button = ;
} else {
  button = ;
}

return (
  

    
    {button}
  
);

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

return (
    

      
Hello!
      {unreadMessages.length > 0 &&
        

          You have {unreadMessages.length} unread messages.
        
      }
    
  );