Reagovat podmíněné vykreslování
V Reactu můžete podmíněně vykreslovat komponenty.
Existuje několik způsobů, jak to udělat.
if
Tvrzení
K rozhodnutí, kterou komponentu vykreslíme, můžeme použít if
operátor JavaScriptu.
Příklad:
Použijeme tyto dvě složky:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
Příklad:
Nyní vytvoříme další komponentu, která vybere komponentu k vykreslení na základě podmínky:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Zkuste změnit isGoal
atribut na true
:
Příklad:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
Získejte certifikaci!
95 $ PŘIHLÁSIT SE
Logický &&
operátor
Dalším způsobem, jak podmíněně vykreslit komponentu React, je použití &&
operátoru.
Příklad:
JavaScriptové výrazy můžeme vložit do JSX pomocí složených závorek:
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')
);
Pokud cars.length
se rovná true, &&
vykreslí se výraz za.
Zkuste pole vyprázdnit cars
:
Příklad:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Ternární operátor
Dalším způsobem podmíněného vykreslení prvků je použití ternárního operátoru.
condition ? true : false
Vrátíme se k příkladu cíle.
Příklad:
Vraťte MadeGoal
komponentu, pokud
isGoal
je true
, jinak vraťte MissedGoal
komponentu:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Další informace naleznete v sekci ternární operátor .