Conditional Class Names बनाना
In this page:
<div className={condition ? "class-a" : "class-b"}>...</div>
<div className={`base ${condition ? "modifier" : ""}`}>...</div>
<div className={clsx("base", { modifier: condition })}>...</div>एक Ternary से className बनाना
किसी class को conditionally apply करने का सबसे simple तरीका एक ternary expression है सीधे className prop के अंदर, एक boolean condition के आधार पर दो class name strings में से choose करते हुए, जैसे एक button active है या disabled।
उदाहरण: Building a className with a Ternary
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [active, setActive] = React.useState(false);
return <button className={active ? "btn active" : "btn"} onClick={() => setActive(!active)}>Toggle</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>एक Base Class को Modifiers के साथ Combine करना
एक common pattern हमेशा एक base class apply करना है (जैसे btn) plus zero या ज़्यादा modifier classes (जैसे btn-primary या btn-disabled) props के आधार पर, एक template literal से built up जो हर modifier को conditionally include करता है।
उदाहरण: Combining a Base Class with Modifiers
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Button({ primary, disabled, children }) {
const className = `btn${primary ? " btn-primary" : ""}${disabled ? " btn-disabled" : ""}`;
return <button className={className} disabled={disabled}>{children}</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Button primary>Click</Button>);
</script>
</body>
</html>Complex Cases के लिए एक Helper Library उपयोग करना
clsx या classnames जैसी Libraries एक object लेती हैं जहां keys class names हैं और values booleans हैं, automatically सिर्फ true ones को एक final string में join करते हुए।
यह manual string building से कहीं बेहतर scale करता है जब आपके पास कई independent conditions हों।
उदाहरण: Using a Helper Library for Complex Cases
// Run in your local React project (npm install required)
import clsx from 'clsx';
function Button({ active, disabled, children }) {
return <button className={clsx('btn', { active, disabled })}>{children}</button>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- clsx या classnames जैसे helper के बजाय error-prone manual string concatenation से className strings बनाना।
- Multiple classes manually concatenate करते समय एक space भूल जाना, accidentally दो class names को एक invalid में merge करते हुए।
- एक conditional class apply करना लेकिन उसके लिए कोई matching CSS rule actually define करना भूल जाना।
- एक component का className template literals या ternaries उपयोग करके props या state के आधार पर dynamically बनाया जा सकता है।
- clsx या classnames जैसी Libraries कई conditional classes cleanly combine करना simplify करती हैं।
- एक common pattern है एक base class हमेशा apply होना, plus conditional modifier classes।
- Conditional classes का कोई visible effect सिर्फ तभी है जब उनके लिए matching CSS rules actually मौजूद हों।
कोई React-version restriction नहीं — template literals और ternaries plain JavaScript हैं।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: