Necesita un poco de orientación con la representación condicional en reaccionar
class Car extends React.Component { id = '123456' render() { if("id".includes("1") === true){ return <h2>$$${id}</h2>; } else{ return <h2>{id}</h2>; } }Para renderizar $$$ para ciertas condiciones, además de usar if else y renderizar, ¿hay alguna forma de renderizar condicionalmente? una mejor manera y el retorno puede ser bastante largo en aplicaciones grandes. ¿Hay alguna manera de escribir condicional y devolver el valor de acuerdo con él?
Su pregunta no es muy clara, así que haga bien en agregar algo de claridad si mi respuesta no es satisfactoria.
Cuando desee renderizar condicionalmente en reaccionar, puede usar la propiedad de cortocircuito del operador &&.
Por ejemplo:
(false && "Logged In") //Logged InEntonces, usando esta idea, puede hacer lo mismo con los componentes.
function App(props) { let element if(props.loggedIn) { element = <div>Logged In</div> } else { element = <div>Not Logged In</div> } return element }simplemente se convierte
function App(props) { return ( <div> { props.loggedIn && <h3>You're logged in as {props.data.username}</h3> } </div> ) }Hay una variedad de formas de hacer renderizado condicional. Aquí hay un ejemplo con un operador ternario para casos simples:
render() { return <h2>{id.includes("1") ? "$$$" : ""}{id}</h2> }También puede considerar el uso de una declaración de cambio , donde mueve la lógica condicional fuera de la función de representación.