प्रतिक्रिया सशर्त प्रतिपादन
प्रतिक्रिया में, आप सशर्त रूप से घटकों को प्रस्तुत कर सकते हैं।
इसे करने बहुत सारे तरीके हैं।
if
कथन
हम if
जावास्क्रिप्ट ऑपरेटर का उपयोग यह तय करने के लिए कर सकते हैं कि किस घटक को प्रस्तुत करना है।
उदाहरण:
हम इन दो घटकों का उपयोग करेंगे:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
उदाहरण:
अब, हम एक और घटक बनाएंगे जो यह चुनता है कि किसी शर्त के आधार पर कौन सा घटक प्रस्तुत करना है:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
isGoal
विशेषता को इसमें बदलने का प्रयास करें true
:
उदाहरण:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
प्रमाणन हासिल करें!
$95 नामांकन
लॉजिकल &&
ऑपरेटर
एक प्रतिक्रिया घटक को सशर्त रूप से प्रस्तुत करने का दूसरा तरीका &&
ऑपरेटर का उपयोग करना है।
उदाहरण:
हम घुंघराले ब्रेसिज़ का उपयोग करके JSX में जावास्क्रिप्ट एक्सप्रेशन एम्बेड कर सकते हैं:
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
सत्य के बराबर है, तो बाद का व्यंजक &&
रेंडर करेगा।
cars
सरणी खाली करने का प्रयास करें :
उदाहरण:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
टर्नरी ऑपरेटर
तत्वों को सशर्त रूप से प्रस्तुत करने का दूसरा तरीका टर्नरी ऑपरेटर का उपयोग करना है।
condition ? true : false
हम लक्ष्य उदाहरण पर वापस जाएंगे।
उदाहरण:
MadeGoal
यदि
isGoal
है तो घटक लौटाएँ true
, अन्यथा घटक लौटाएँ MissedGoal
:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
अधिक जानने के लिए, टर्नरी ऑपरेटर अनुभाग देखें।