एक ReactJS घटक में कई कक्षाएं कैसे जोड़ें

Question

मैं ReactJS और JSX में नया हूं और नीचे दिए गए कोड से मुझे थोड़ी परेशानी हो रही है।

मैं classNameप्रत्येक पर विशेषता के लिए कई वर्गों को जोड़ने का प्रयास कर रहा हूं li:

<li key={index} className={activeClass, data.class, "main-class"}></li>

मेरा प्रतिक्रिया घटक है:

var AccountMainMenu = React.createClass({
  getInitialState: function() {
    return { focused: 0 };
  },

  clicked: function(index) {
    this.setState({ focused: index });
  },

  render: function() {
    var self = this;
    var accountMenuData = [
      {
        name: "My Account",
        icon: "icon-account"
      },
      {
        name: "Messages",
        icon: "icon-message"
      },
      {
        name: "Settings",
        icon: "icon-settings"
      }
    /*{
        name:"Help &amp; Support &nbsp; <span class='font-awesome icon-support'></span>[phone]",
        listClass:"no-mobile last help-support last"
      }*/
    ];

    return (
      <div className="acc-header-wrapper clearfix">
        <ul className="acc-btns-container">
          {accountMenuData.map(function(data, index) {
            var activeClass = "";

            if (self.state.focused == index) {
              activeClass = "active";
            }

            return (
              <li
                key={index}
                className={activeClass}
                onClick={self.clicked.bind(self, index)}
              >
                <a href="#" className={data.icon}>
                  {data.name}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
});

ReactDOM.render(<AccountMainMenu />, document.getElementById("app-container"));

Comments

मुझे यहां एक संक्षिप्त उत्तर मिला है stackoverflow.com/a/36209517/4125588 , केवल इस क्लास में शामिल होने के लिए जावास्क्रिप्ट का उपयोग करें, स्थैतिक या गतिशील, '+' ऑपरेटर के साथ, याद रखें '' को पहले एक को छोड़कर कक्षाओं से पहले सम्मिलित करें, जैसा कि वास्तविक है HTML में क्लास 'ab c' की तरह होनी चाहिए, उनके बीच भी जगह होनी चाहिए।

— फडेओक खोस

घटकों पर प्रतिक्रिया करने के लिए कक्षा के नामों में उत्तीर्ण होने

— डैशडैशज़ैको

क्यों classNames={{foo: true, bar: true, baz: false}}और classNames={["foo", "bar"]}सिर्फ काम नहीं ?

— पीटर वी। मॉरच

Answer 1

मैं वर्गनाम का उपयोग तब करता हूं जब वर्गों को निर्णय लेने के लिए उचित मात्रा में तर्क की आवश्यकता होती है (उपयोग नहीं)। एक अत्यधिक सरल उदाहरण :

...
    var liClasses = classNames({
      'main-class': true,
      'activeClass': self.state.focused === index
    });

    return (<li className={liClasses}>{data.name}</li>);
...

उस ने कहा, यदि आप एक निर्भरता को शामिल नहीं करना चाहते हैं तो नीचे बेहतर उत्तर हैं।

Comments

यह बहुत बुरा है कि आपको सिर्फ एक तत्व में दो वर्गों को जोड़ने के लिए

— क्लासनेम

@ user959690 यह एक उदाहरण है। यह पुस्तकालय बहुत अच्छा है जब आप इन चीजों को बहुत कर रहे हैं और आपके पास जटिल तर्क हैं जब कक्षाओं को लागू करने की आवश्यकता है या नहीं। यदि आप कुछ सरल कर रहे हैं, तो सुनिश्चित करें कि बस टेम्पलेट्स का उपयोग करें, लेकिन हर मामला अलग है और पाठक को अपनी नौकरी के लिए सही उपकरण चुनना चाहिए।

— जैक

@ user959690 यह ध्यान देने योग्य है कि यह अब वेबपैक का उपयोग करते समय एनपीएम द्वारा स्थापित किया गया है , इसलिए import classNames from 'classnames'एक घटक में उपयोग करना है className={classNames(classes.myFirstClass, classes.mySecondClass)} ।

— होलीगांट

बाहरी पुस्तकालय का उपयोग करने की आवश्यकता नहीं है, नीचे मेरा उत्तर देखें।

— हू डेविस

पुस्तकालय के अन्य लाभ हैं:var btnClass = classNames({ btn: true, 'btn-pressed': this.state.isPressed, 'btn-over': !this.state.isPressed && this.state.isHovered }); return <button className={btnClass}>{this.props.label}</button>;

— अमितजस

Answer 2

मैं ES6 टेम्पलेट शाब्दिक का उपयोग करता हूं । उदाहरण के लिए:

const error = this.state.valid ? '' : 'error'
const classes = `form-control round-lg ${error}`

और फिर इसे प्रस्तुत करें:

<input className={classes} />

एक-लाइनर संस्करण:

<input className={`form-control round-lg ${this.state.valid ? '' : 'error'}`} />

Comments

इसके अलावा:<input className={`class1 ${class2}`}>

— कोड़ी मोनिज़

@unyo कृपया अपनी टिप्पणी एक उत्तर के रूप में पोस्ट करें ताकि मैं इसे बढ़ा सकूं। यह इसके बहुत हकदार हैं। मैं इस आसान के रूप में कुछ के लिए 1 घंटे की तलाश कर रहा हूं, और अब मुझे यह एक टिप्पणी के रूप में दफन है। धन्यवाद।

— सौविक घोष

इसमें परिणाम आता है <input class=" form-control input-lg round-lg" />। शुरुआत में अतिरिक्त स्थान पर ध्यान दें। यह मान्य है, लेकिन बदसूरत है। यहां तक कि प्रतिक्रिया पूछे जाने वाले प्रश्न एक और तरीका है या classnames पैकेज का उपयोग की सिफारिश की: reactjs.org/docs/faq-styling.html

— Nakedible

मैं समझ नहीं पा रहा हूं कि आप कुछ क्लासेस सेट करने के लिए वेनिला जावास्क्रिप्ट का उपयोग करके सेट की जा सकने वाली लाइब्रेरी (जैसे स्वीकृत उत्तर में) क्यों आयात करेंगे, जो कि अधिक कुशल, क्लीनर और पठनीय समाधान है, वैसे भी।

— मार्कस पार्सन्स

यह सही जवाब है। "सही" उत्तर में सुझाए अनुसार इसके लिए एक निर्भरता का उपयोग करना ओवरकिल है।

— TheDarkIn1978

Answer 3

बस जावास्क्रिप्ट का उपयोग करें।

<li className={[activeClass, data.klass, "main-class"].join(' ')} />

यदि आप किसी ऑब्जेक्ट में वर्ग आधारित कुंजी और मान जोड़ना चाहते हैं, तो आप निम्नलिखित का उपयोग कर सकते हैं:

function classNames(classes) {
  return Object.entries(classes)
    .filter(([key, value]) => value)
    .map(([key, value]) => key)
    .join(' ');
}

const classes = {
  'maybeClass': true,
  'otherClass': true,
  'probablyNotClass': false,
};

const myClassNames = classNames(classes);
// Output: "maybeClass otherClass"

<li className={myClassNames} />

या और भी सरल:

const isEnabled = true;
const isChecked = false;

<li className={[isEnabled && 'enabled', isChecked && 'checked']
  .filter(e => !!e)
  .join(' ')
} />
// Output:
// <li className={'enabled'} />

Comments

यहाँ वह पंक्ति है जो मेरे लिए काम करती है:className={['terra-Table', medOrder.resource.status]}

— डग विलहेल्म

@DougWilhelm मुझे नहीं लगता कि यह काम करता है। इसका तात्पर्य यह है कि स्टर्लिंग को कॉल करना और कक्षाओं की अल्पविराम से अलग सूची बनाना। github.com/facebook/react/issues/3138

— 0xcaff

className={[listOfClasses].join(' ')}यह मेरे लिए काम कर रहा है का उपयोग करने के लिए अच्छा विचार धन्यवाद!

— अला एडडाइन जेबीएलआई

Answer 4

concat

कोई ज़रूरत नहीं है फैंसी होने के लिए मैं सीएसएस मॉड्यूल का उपयोग कर रहा हूं और यह आसान है

import style from '/css/style.css';

<div className={style.style1+ ' ' + style.style2} />

यह परिणाम होगा:

<div class="src-client-css-pages-style1-selectionItem src-client-css-pages-style2">

दूसरे शब्दों में, दोनों शैलियों

सशर्त,

अगर के साथ एक ही विचार का उपयोग करना आसान होगा

const class1 = doIHaveSomething ? style.style1 : 'backupClass';

<div className={class1 + ' ' + style.style2} />

Comments

इसने मेरे लिए '-' नाम के साथ, अर्थात: <nav className = {style.navbar + "" + स्टाइल ['navbar-default']}>>

— Flinkman

LOL, मैं अपना सिर फोड़ता हूं और उत्तर सरल कंकट है: D। सीएसएस लोडर मॉड्यूल

— GusDeCooL

इसके साथ समस्या यह है कि आपके पास वैकल्पिक कक्षाएं नहीं हो सकती हैं (यदि अपरिभाषित है, तो इसे जोड़ा नहीं जाएगा), इसलिए यह निर्भर करता है कि आप सुनिश्चित हैं कि आपकी कक्षा शून्य नहीं है (वैकल्पिक नहीं है)। वैकल्पिक के मामले में बेहतर नहीं है तो वर्गों की तरह एक सहायक ()। हम उस className={स्लाइडर $ {className जैसे टेम्पलेट्स के साथ एक टर्नरी का उपयोग कर सकते हैं ? `$ {className} : ''}}` `। लेकिन यह बहुत कुछ है। [नोट: 'कुछ' + अपरिभाषित = 'कुछ अधूरा'। जेएस गतिशील रूपांतरण।

— मोहम्मद अलल

यकीन है कि आप कर सकते हैं, बस ऊपर एक चर घोषित करते हैं और सशर्त रूप से इसका उपयोग करते हैं :)

— जेमी हटबर

Answer 5

यह ES6 टेम्पलेट शाब्दिक के साथ प्राप्त किया जा सकता है:

<input className={`class1 ${class2}`}>

Comments

यह लगभग मेरे लिए काम कर रहा था मुझे सिर्फ class1 को इंटरपोल करना था और अधिक त्रुटियां नहीं थीं, इसलिए यह इस तरह दिखता है <input className={`${class1} ${class2}`}>

— किंग्स्टन फॉर्च्यून

Answer 6

आप इस तरह से कई वर्ग नामों के साथ एक तत्व बना सकते हैं:

<li className="class1 class2 class3">foo</li>

स्वाभाविक रूप से, आप कक्षा नामों से युक्त स्ट्रिंग का उपयोग कर सकते हैं और तत्व के वर्ग नामों को अद्यतन करने के लिए इस स्ट्रिंग में हेरफेर कर सकते हैं।

var myClassNammes = 'class1 class2 class3';
...
<li className={myClassNames}>foo</li>

Comments

क्या आपने यह परीक्षण किया? मैं :) किया

— रैवेन

हाँ, मैंने किया। वास्तव में, मैं इसे अक्सर उपयोग कर रहा हूं, लेकिन सिर्फ एक टाइपो को देखा और ठीक किया है। बेशक पहली पंक्ति में कक्षा के नाम वाले स्ट्रिंग को "इसके बजाय का उपयोग करके बनाया जाना है '। उसके लिए माफ़ करना।

— रात

Answer 7

इस तरह आप ES6 के साथ ऐसा कर सकते हैं:

className = {`
      text-right
      ${itemId === activeItemId ? 'active' : ''}
      ${anotherProperty === true ? 'class1' : 'class2'}
`}

आप कई वर्गों और शर्तों को सूचीबद्ध कर सकते हैं और साथ ही आप स्थिर कक्षाओं को भी शामिल कर सकते हैं। अतिरिक्त पुस्तकालय जोड़ना आवश्यक नहीं है।

सौभाग्य ;)

Comments

यह सभी अतिरिक्त व्हाट्सएप को देखते हुए बहुत बदसूरत HTML में परिणाम करता है।

— नेकेडबल

ऐसा लिखा जाना जरूरी नहीं है। यह सिर्फ एक उदाहरण है जो समाधान को बेहतर ढंग से समझाता है। और हमेशा उत्पादन में आपके पास छोटा संस्करण होता है :)

— Histo Eftimov

Answer 8

वेनिला जेएस

बाहरी पुस्तकालयों के लिए कोई ज़रूरत नहीं है - बस ES6 टेम्पलेट स्ट्रिंग्स का उपयोग करें :

<i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>

Comments

वेनिला JS ES6 नहीं है। लेकिन मुझे आपका उदाहरण पसंद है।

— रयाननर्ड

@RyanNerd क्या आपका मतलब है "ES6 वैनिला JS नहीं है"? वैसे भी, यह है, क्योंकि वेनिला जेएस का अर्थ है बिना किसी ढांचे के जावास्क्रिप्ट। ES6 जावास्क्रिप्ट का एक नया संस्करण है। - stackoverflow.com/a/20435685/5111113

— हू डेविस

गलत जवाब नहीं है लेकिन बहुत सुधार किया जा सकता है। उदाहरण के लिए, बाकी सभी ने राज्यों के बारे में उदाहरण जोड़े।

— जेलगार्डो

Answer 9

हो सकता है कि classnames आपकी मदद कर सकते हैं।

var classNames = require('classnames');
classNames('foo', {'xx-test': true, bar: false}, {'ox-test': false}); // => 'foo xx-test'

Comments

क्या आप इस उदाहरण को अधिक उपयोगी बना सकते हैं।

— जालगोर्दो

Answer 10

मुझे नहीं लगता कि हमें केवल कई वर्गों को जोड़ने के लिए एक बाहरी पैकेज का उपयोग करने की आवश्यकता है।

मैं व्यक्तिगत रूप से उपयोग करता हूं

<li className={`li active`}>Stacy</li>

या

<li className={`li ${this.state.isActive ? 'active' : ''}`}>Stacy<li>

यदि आपको सशर्त रूप से कक्षाएं जोड़ने या हटाने की आवश्यकता होती है तो दूसरा एक।

Comments

यह केवल एक ही वर्ग को जोड़ देगा।

— ट्रिकऑट्रीट

Answer 11

बस जोड़कर, हम खाली तारों को फ़िल्टर कर सकते हैं।

className={[
    'read-more-box',
    this.props.className,
    this.state.isExpanded ? 'open' : 'close',
].filter(x => !!x).join(' ')}

Answer 12

आप इस तरह के कई वर्ग नामों के साथ एक तत्व बना सकते हैं, मैंने इन दोनों तरीकों की कोशिश की, इसका काम ठीक है ...

यदि आप किसी भी सीएसएस का आयात करते हैं तो आप इस तरह से अनुसरण कर सकते हैं: तरीका 1:

import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
  render() {
    return (
      <div className={[styles.class1, styles.class2].join(' ')}>
        { 'text' }
      </div>
    );
  }
}

रास्ता 2:

import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
  render() {
    return (
      <div className={styles.class1 + ' ' + styles.class2}>
        { 'text' }
      </div>
    );
  }
}

**

यदि आप आंतरिक के रूप में सीएसएस लागू करते हैं:

const myStyle = {
  color: "#fff"
};

// React Element using Jsx
const myReactElement = (
  <h1 style={myStyle} className="myClassName myClassName1">
    Hello World!
  </h1>
);

ReactDOM.render(myReactElement, document.getElementById("app"));

.myClassName {
  background-color: #333;
  padding: 10px;
}
.myClassName1{
  border: 2px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<div id="app">
  
</div>

Answer 13

आप निम्नलिखित कर सकते हैं:

<li key={index} className={`${activeClass} ${data.class} main-class`}></li>

एक छोटा और सरल समाधान, आशा है कि यह मदद करता है।

Answer 14

यह https://www.npmjs.com/package/clsx के साथ किया जा सकता है :

https://www.npmjs.com/package/clsx

पहले इसे स्थापित करें:

npm install --save clsx

फिर इसे अपनी घटक फ़ाइल में आयात करें:

import clsx from  'clsx';

फिर अपने घटक में आयातित फ़ंक्शन का उपयोग करें:

<div className={ clsx(classes.class1, classes.class2)}>

Answer 15

पार्टी के लिए देर से, लेकिन इतनी सरल समस्या के लिए तीसरे पक्ष का उपयोग क्यों करें?

आप या तो @Huw Davies के रूप में इसका उल्लेख कर सकते हैं - सबसे अच्छा तरीका

1. <i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>
2. <i className={[styles['foo-bar-baz'], 'fa fa-user', 'fa-2x'].join(' ')}

दोनों अच्छे हैं। लेकिन लेखन एक बड़े ऐप के लिए जटिल बन सकता है। इसे इष्टतम बनाने के लिए, मैं उपरोक्त चीजों को समान करता हूं लेकिन इसे एक सहायक कक्षा में रखता हूं

मेरे नीचे के हेल्पर फ़ंक्शन का उपयोग करना, मुझे भविष्य के संपादन के लिए तर्क को अलग रखने की अनुमति देता है, और मुझे कक्षाओं को जोड़ने के लिए कई तरीके भी देता है

classNames(styles['foo-bar-baz], 'fa fa-user', 'fa-2x')

या

classNames([styles['foo-bar-baz], 'fa fa-user', 'fa-2x'])

यह नीचे मेरा सहायक कार्य है। मैंने इसे एक सहायक में रखा है। जहाँ मैं अपने सभी सामान्य तरीके रखता हूँ। इस तरह के एक सरल कार्य होने के कारण, मैंने नियंत्रण रखने के लिए 3 पार्टी का उपयोग करने से परहेज किया

export function classNames (classes) {
    if(classes && classes.constructor === Array) {
        return classes.join(' ')
    } else if(arguments[0] !== undefined) {
        return [...arguments].join(' ')
    }
    return ''
}

Answer 16

आप सरणियों का उपयोग कर सकते हैं और फिर उन्हें अंतरिक्ष का उपयोग करके जोड़ सकते हैं।

<li key={index} className={[activeClass, data.class, "main-class"].join(' ')}></li>

यह परिणाम होगा:

<li key={index} class="activeClass data.class main-class"></li>

Answer 17

मुझे पता है कि यह देर से जवाब है, लेकिन मुझे उम्मीद है कि इससे किसी को मदद मिलेगी।

गौर कीजिए कि आपने एक css फ़ाइल ' प्राथमिक ', ' फ़ॉन्ट-आई ', ' फ़ॉन्ट-एक्सएल ' में निम्नलिखित वर्गों को परिभाषित किया है ' ।

• सीएसएस फ़ाइल आयात करने के लिए पहला कदम होगा।
• फिर

<h3 class = {` ${'primary'} ${'font-i'} font-xl`}> HELLO WORLD </h3>

चाल तो चलेगी!

अधिक जानकारी के लिए: https://www.youtube.com/watch?v=j5P9FHiBVNo&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3.index=20

Answer 18

अधिक वर्गों को जोड़ने के लिए

... className={`${classes.hello} ${classes.hello1}`...

Answer 19

फेसबुक के टोडो टेक्स्ट इनपुट.जेएस उदाहरण का उपयोग करना

render() {
    return (
      <input className={
        classnames({
          edit: this.props.editing,
          'new-todo': this.props.newTodo
        })}
        type="text"
        placeholder={this.props.placeholder}
        autoFocus="true"
        value={this.state.text}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onKeyDown={this.handleSubmit} />
    )
  } 

सादे वनीला js कोड के साथ वर्गनाम की जगह इस तरह दिखाई देगी:

render() {
    return (
      <input
        className={`
          ${this.props.editing ? 'edit' : ''} ${this.props.newTodo ? 'new-todo' : ''}
        `}
        type="text"
        placeholder={this.props.placeholder}
        autoFocus="true"
        value={this.state.text}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onKeyDown={this.handleSubmit} />
    )
  }

Answer 20

यदि आपको कोई अन्य मॉड्यूल आयात करने का मन नहीं है, तो यह फ़ंक्शन classNamesमॉड्यूल की तरह काम करता है ।

function classNames(rules) {
    var classes = ''

    Object.keys(rules).forEach(item => {    
        if (rules[item])
            classes += (classes.length ? ' ' : '') + item
    })

    return classes
} 

आप इसे इस तरह से उपयोग कर सकते हैं:

render() {
    var classes = classNames({
        'storeInfoDiv': true,  
        'hover': this.state.isHovered == this.props.store.store_id
    })   

    return (
        <SomeComponent style={classes} />
    )
}

Comments

यदि आप नक्शे के साथ या कम कर सकते हैं तो क्लोजर का उपयोग क्यों करें? function classNames(rules) { return Object.entries(rules) .reduce( (arr, [cls, flag]) => { if (flag) arr.push(cls); return arr }, [] ).join(" ") }

— еввгений Савичев

Answer 21

यही तो मैं करता हूं:

घटक:

const Button = ({ className }) => (
  <div className={ className }> </div>
);

कॉलिंग घटक:

<Button className = 'hashButton free anotherClass' />

Answer 22

मैं रिएक्ट 16.6.3 और @ मैट यूआई 3.5.1 का उपयोग कर रहा हूं, और क्लासनेम जैसे सरणियों का उपयोग करने में सक्षम हूं className={[classes.tableCell, classes.capitalize]}

तो आपके उदाहरण में, निम्नलिखित समान होगा।

<li key={index} className={[activeClass, data.class, "main-class"]}></li>

Comments

यह वही है जो मैं कर रहा था (कोई MUI नहीं) और काम नहीं करता, केवल प्रथम श्रेणी लागू करता है - कोई चेतावनी या शिकायत नहीं।

— जुआन लानुस

Answer 23

Https://www.npmjs.com/package/classnames का उपयोग करें

'classnames' से classNames का आयात करें;

1. अलग-अलग कक्षाओं का उपयोग कर सकते हैं जो अलग-अलग होते हैं:

   <li className={classNames(classes.tableCellLabel, classes.tableCell)}>Total</li>

2. स्थिति के साथ अलग किए गए कोमा का उपयोग करके कई वर्गों का उपयोग कर सकते हैं:

   <li className={classNames(classes.buttonArea, !nodes.length && classes.buttonAreaHidden)}>Hello World</li> 

सरणी के रूप में वर्गनाम का उपयोग करना भी काम करेगा, लेकिन चेतावनी देता है उदा

className={[classes.tableCellLabel, classes.tableCell]}

Comments

एक और मौजूदा जवाब का डुप्लिकेट ।

— जैक बशफोर्ड

Answer 24

मैं आरसी-क्लासनेम पैकेज का उपयोग करता हूं ।

// ES6
import c from 'rc-classnames';

// CommonJS
var c = require('rc-classnames');

<button className={c('button', {
  'button--disabled': isDisabled,
  'button--no-radius': !hasRadius
})} />

आप किसी भी प्रारूप (सरणी, ऑब्जेक्ट, तर्क) में कक्षाएं जोड़ सकते हैं। trueएक साथ विलय करने के लिए समान वस्तुओं में सरणियों या तर्क प्लस कुंजी से सभी सत्य मान ।

उदाहरण के लिए:

ReactClassNames('a', 'b', 'c') // => "a b c"
ReactClassNames({ 'a': true, 'b': false, c: 'true' }) // => "a c"
ReactClassNames(undefined, null, 'a', 0, 'b') // => "a b"

Answer 25

मैं bind classNamesघटक में आयात सीएसएस मॉड्यूल के लिए।

import classNames from 'classnames'; 
import * as styles from './[STYLES PATH];
const cx = classNames.bind(styles); 

classnamesclassNameप्रतिक्रियाशील तत्व को घोषित तरीके से घोषित करने की क्षमता देता है ।

उदाहरण के लिए:

<div classNames={cx(styles.titleText)}> Lorem </div>

<div classNames={cx('float-left')}> Lorem </div> // global css declared without css modules
<div classNames={cx( (test === 0) ?
             styles.titleText : 
             styles.subTitleText)}>  Lorem </div> // conditionally assign classes

<div classNames={cx(styles.titleText, 'float-left')}> Lorem </div> //combine multiple classes

Answer 26

मैं आमतौर पर इसका उपयोग इस तरह से करता हूं: (आपके मामले में)

    <li  key={index} className={
        "component " +
        `${activeClass? activeClass: " not-an-active-class "}` +
        `${data.class? " " + data.class : " no-data-class "}`
   } />

जब यह JSX की बात आती है और (आमतौर पर) हमारे पास कुछ जोंस होता है ... आप इसे लूप करते हैं ... घटक । मैप , साथ ही कुछ सशर्त यह जांचने के लिए कि क्या JSON प्रॉपर्टी JSON से प्रॉपर्टी वैल्यू के आधार पर क्लास नाम रेंडर करने के लिए मौजूद है। घटक के नीचे उदाहरण में_कोलर और कंपोनेंट_डार्क_शेड घटक से गुण हैं। पाम ()

   <div className={
        "component " +
        `${component_color? component_color: " no-color "}` +
        `${component_dark_shade? " " + component_dark_shade : " light "}`
   }/>

आउटपुट: <div class="component no-color light" .... या: <div class="component blue dark" ....मानचित्र से मूल्यों के आधार पर ...

Answer 27

जब मेरे पास कई अलग-अलग वर्ग हैं, तो मैंने निम्नलिखित को उपयोगी पाया है।

फ़िल्टर किसी भी nullमान को निकालता है और सम्मिलित सभी शेष मानों को एक अलग किए गए स्ट्रिंग में रखता है।

const buttonClasses = [
    "Button", 
    disabled ? "disabled" : null,
    active ? "active" : null
].filter((class) => class).join(" ")

<button className={buttonClasses} onClick={onClick} disabled={disabled ? disabled : false}>