Reagir Renderização Condicional
No React, você pode renderizar componentes condicionalmente.
Existem várias maneiras de fazer isso.
if Declaração
Podemos usar o ifoperador JavaScript para decidir qual componente renderizar.
Exemplo:
Usaremos esses dois componentes:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
Exemplo:
Agora, vamos criar outro componente que escolhe qual componente renderizar com base em uma condição:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Tente alterar o isGoalatributo para true:
Exemplo:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
Obter certificação!
$ 95 INSCRIÇÃO
&&Operador lógico
Outra maneira de renderizar condicionalmente um componente React é usando o &&operador.
Exemplo:
Podemos incorporar expressões JavaScript no JSX usando chaves:
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')
);
Se cars.length for igual a true, a expressão depois &&será renderizada.
Tente esvaziar o carsarray:
Exemplo:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Operador Ternário
Outra maneira de renderizar elementos condicionalmente é usando um operador ternário.
condition ? true : false
Voltaremos ao exemplo da meta.
Exemplo:
Retorne o MadeGoalcomponente se
isGoalfor true, caso contrário, retorne o MissedGoalcomponente:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Para saber mais, consulte a seção do operador ternário .