React Koşullu Oluşturma
React'te bileşenleri koşullu olarak oluşturabilirsiniz.
Bunu yapmanın birkaç yolu vardır.
if Beyan
ifHangi bileşenin oluşturulacağına karar vermek için JavaScript operatörünü kullanabiliriz .
Örnek:
Bu iki bileşeni kullanacağız:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
Örnek:
Şimdi, bir koşula göre hangi bileşenin oluşturulacağını seçen başka bir bileşen oluşturacağız:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
isGoalÖzelliği şu şekilde değiştirmeyi deneyin true:
Örnek:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
Sertikalı olmak!
95 $ KAYIT
Mantıksal &&Operatör
Bir React bileşenini koşullu olarak oluşturmanın başka bir yolu da &&operatörü kullanmaktır.
Örnek:
JavaScript ifadelerini küme parantezleri kullanarak JSX'e gömebiliriz:
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')
);
cars.length is true değerine eşitse, sonraki ifade oluşturulacaktır &&.
carsDiziyi boşaltmayı deneyin :
Örnek:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Üçlü operatör
Öğeleri koşullu olarak oluşturmanın başka bir yolu da üçlü operatör kullanmaktır.
condition ? true : false
Hedef örneğine geri döneceğiz.
Örnek:
MadeGoalEğer
isGoalise bileşeni iade trueedin, aksi halde MissedGoalbileşeni iade edin:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Daha fazla bilgi edinmek için üçlü operatör bölümüne bakın.