0
294
Vistasrepresentación condicional para mostrar en React
Quería mostrar una insignia/texto después de lo cual se cumple la condición de dos condiciones. La primera condición es que, si no hay OpenSopts disponibles, muestre la insignia/texto AGOTADO y si esta condición no se cumple, verifique si está en línea y luego muestre la insignia/texto de EN LÍNEA . Pero la insignia/el texto no se muestra en el componente de la tarjeta, ¿puede decirme qué error estoy cometiendo?
3 Respuestas
Responde la pregunta0
El JSX que se devuelve no incluye el JSX en su declaración if / else . Debe ser parte del JSX que se devuelve para que aparezca.
Puede usar expresiones ternarias para hacerlo de esta manera (agregue esto al JSX después de su declaración de return , colóquelo donde desee que se represente la insignia):
{ props.openSpots === 0 ? <div className="card--badge">SOLD OUT</div> : null } { props.openSpots > 0 && props.location === "Online" ? <div className="card--badge">Online</div> : null }Podría anidarlos si quisiera una sola declaración, pero eso comienza a ser difícil de leer :
{ props.openSpots === 0 ? <div className="card--badge">SOLD OUT</div> : props.location === "Online" ? <div className="card--badge">Online</div> : null }0
No está utilizando JSX en la parte de representación, es solo una declaración.
Guarde el JSX en una variable como esta:
let badge = null if (openSpots === 0) { badge = .. } else if (..) { badge = .. } // Use it in code ... <div class="card-badge">{badge}</div>O use la representación condicional en línea
0
Solo asigna tu pieza de código a una variable y luego renderízala donde quieras.😊
... const badge = openSpots === 0 ? <div className="card--badge">SOLD OUT</div> : <div className="card--badge">Online</div> ... return ( <div> {badge} </div> );