Styled Components के साथ React में सशर्त रेंडरिंग में प्रॉप्स का उपयोग
प्रॉप्स का उपयोग सशर्त
रेंडरिंग के लिए भी किया जा सकता है।
आइए React कंपोनेंट Block को लें,
जिसके साथ हमने पिछले पाठ में काम किया था।
आइए ऐसा करें कि पहले इनपुट के लिए बैकग्राउंड
पीला हो, और अन्य इनपुट्स के लिए हरा हो।
इसके लिए, कंपोनेंट Input के लिए स्टाइल्स में
एक और लाइन जोड़ेंगे और यह इस प्रकार होगा:
const Input = styled.input`
background: ${(props) => (props.first ? 'yellow' : 'green')};
margin: 5px;
font-size: 18px;
`;
पहले इनपुट में प्रॉप first जोड़ें:
<Container>
<Input first />
<Input placeholder="name" type="text" />
<Input type="password" />
</Container>
पाठ के सिद्धांत में दिए गए सशर्त रेंडरिंग का उपयोग करते हुए,
पिछले पाठ के कार्य के समाधान के कोड को इस तरह संशोधित करें
कि प्रॉप warn की उपस्थिति में बटन का टेक्स्ट
लाल हो और उसका बैकग्राउंड पीला हो, और इसके बिना -
हरा बैकग्राउंड और सफेद टेक्स्ट।
warn दूसरे बटन को पास करें।
