Reagire al rendering condizionale
In React, puoi renderizzare condizionalmente i componenti.
Ci sono diversi modi per farlo.
ifDichiarazione
Possiamo usare l' ifoperatore JavaScript per decidere quale componente rendere.
Esempio:
Useremo questi due componenti:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
Esempio:
Ora creeremo un altro componente che sceglie quale componente rendere in base a una condizione:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Prova a cambiare l' isGoalattributo in true:
Esempio:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
Ottieni la certificazione!
ISCRIVITI A $95
&&Operatore logico
Un altro modo per eseguire il rendering condizionale di un componente React consiste nell'usare l' &&operatore.
Esempio:
Possiamo incorporare espressioni JavaScript in JSX usando le parentesi graffe:
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 è uguale a true, l'espressione after &&verrà renderizzata.
Prova a svuotare l' carsarray:
Esempio:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Operatore ternario
Un altro modo per eseguire il rendering condizionale degli elementi consiste nell'usare un operatore ternario.
condition ? true : false
Torneremo all'esempio dell'obiettivo.
Esempio:
Restituisci il MadeGoalcomponente se
isGoalè true, altrimenti restituisci il MissedGoalcomponente:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Per saperne di più, vedere la sezione dell'operatore ternario .