Réactif: déclaration conditionnelle dans la fonction de rendu

J'ai un éventail d'objets avec différents artistes. Je souhaite afficher un contenu différent en fonction de l'existence ou non d'une image dans l'objet individuel.

J'ai essayé de mettre une déclaration if/else dans ma méthode de rendu, mais bien sûr, cela ne fonctionne pas. Veuillez consulter mon code ci-dessous.

 render: function() { var cardList = this.props.artists.map(function(artist, index){ return( <li key={index} className='card'> <span> {if artist.image} <img src="{artist.image}"> {else} <p>{artist.message}</p> <p>LIKES <i className="fa fa-heart" aria-hidden="true"></i> {artist.likeCount }</p> </span> </li> ) }) return ( <div className='tickerwrapper'> <ul className='list'>{cardList}</ul> </div> ) } 

Vous pouvez intégrer quelque chose comme suit:

 { myVal === true ? <div>True</div> : <div>False</div> } 

Si, par exemple, vous voulez seulement quelque chose rendu si myVal est vrai, vous pouvez renvoyer null s'il est faux:

  { myVal === true ? <div>True</div> : null } 

Si la logique est assez grande, il suffit de l'extraire dans une fonction et de l'appeler à partir de votre rendu:

 renderSalutation() { return (userLoggedOn ? <h3>Hello!</h3> : null); } render() { return ( <div> { this.renderSalutation() } ------other renderings here </div> ); } 

Vous devez utiliser une expression valide dans votre code JSX. Un if-else-statement n'est pas, mais vous pouvez utiliser un opérateur ternaire:

 var cardList = this.props.artists.map(function(artist, index) { return( <li key={index} className='card'> <span> {artist.image ? ( <img src="{artist.image}"> ) : ( <p>{artist.message}</p> <p>LIKES <i className="fa fa-heart" aria-hidden="true"></i> {artist.likeCount}</p> )} </span> </li> ) }) 

Vous pouvez trouver plus d'informations sur le rendu conditionnel dans les documents réactifs .

Cela peut se faire avec si / autrement. Comme indiqué sur le site Réactif:

 function NumberDescriber(props) { let description; if (props.number % 2 == 0) { description = <strong>even</strong>; } else { description = <i>odd</i>; } return <div>{props.number} is an {description} number</div>; } 

Faites simplement quelque chose de similaire dans votre fonction de rendu. Réglez une valeur conditionnelle sur un composant que vous voulez, puis réglez-le dans {}.