Representación condicional de reacción
En React, puede renderizar componentes condicionalmente.
Hay varias maneras de hacer esto.
if
Declaración
Podemos usar el if
operador de JavaScript para decidir qué componente renderizar.
Ejemplo:
Usaremos estos dos componentes:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
Ejemplo:
Ahora, crearemos otro componente que elija qué componente representar en función de una condición:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Intenta cambiar el isGoal
atributo a true
:
Ejemplo:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
¡Obtener la certificación!
$95 INSCRÍBETE
&&
Operador lógico
Otra forma de renderizar condicionalmente un componente de React es usando el &&
operador.
Ejemplo:
Podemos incrustar expresiones de JavaScript en JSX usando llaves:
function Garage(props) {
const cars = props.cars;
return (
<>
<h1>Garage</h1>
{cars.length > 0 &&
<h2>
You have {cars.length} cars in your garage.
</h2>
}
</>
);
}
const cars = ['Ford', 'BMW', 'Audi'];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Si cars.length
es igual a verdadero, la expresión posterior &&
se representará.
Intenta vaciar la cars
matriz:
Ejemplo:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Operador Ternario
Otra forma de renderizar elementos condicionalmente es usando un operador ternario.
condition ? true : false
Volveremos al ejemplo de la meta.
Ejemplo:
Devuelve el MadeGoal
componente si
isGoal
es true
, de lo contrario devuelve el MissedGoal
componente:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Para obtener más información, consulte la sección del operador ternario .