ReactJS डायनामिक क्लास को मैनुअल क्लास नामों में जोड़ता है

Question

मुझे एक डायनामिक क्लास को नियमित कक्षाओं की सूची में जोड़ने की आवश्यकता है, लेकिन यह पता नहीं है कि मैं (मैं बैबल का उपयोग कैसे कर रहा हूं), कुछ इस तरह से:

<div className="wrapper searchDiv {this.state.something}">
...
</div>

कोई विचार?

Comments

प्रतिक्रिया के लिए उपयोगी उत्तर स्टाइलिंग लिंक

— राहिल अहमद

Answer 1

आप या तो यह कर सकते हैं, सामान्य जावास्क्रिप्ट:

className={'wrapper searchDiv ' + this.state.something}

या स्ट्रिंग टेम्पलेट संस्करण, बैकटिक्स के साथ:

className={`wrapper searchDiv ${this.state.something}`}

दोनों प्रकार केवल जावास्क्रिप्ट के हैं, लेकिन पहला पैटर्न पारंपरिक प्रकार है।

वैसे भी, JSX में, घुंघराले कोष्ठक में संलग्न कुछ भी जावास्क्रिप्ट के रूप में निष्पादित किया जाता है, इसलिए आप मूल रूप से वहां जो कुछ भी चाहते हैं, कर सकते हैं। लेकिन JSX स्ट्रिंग्स और कर्ली ब्रैकेट्स को जोड़ना विशेषताओं के लिए एक नो-गो है।

Comments

और कई वर्गों के मामले में क्या?

— परदीप जैन

कई गतिशील वर्गों के मामले में, सभी गतिशील कक्षाएं राज्य से आनी चाहिए, अर्थात इसका उपयोग करना संभव नहीं है element.classList.add("my-class"); इसलिए के लिए अनुमति:className={`wrapper searchDiv ${this.state.something ? "my-class " : ""} ${this.state.somethingElse ? "my-other-class " : ""}`}

— केविन Farrugia

className={'wrapper searchDiv} + this.state.isTrue ? 'my-class' : ' 'यह काम नहीं करता है। क्या कोई बता सकता है क्यों?

— क्रिप्टोकरंसींग

Answer 2

कितने गतिशील कक्षाओं आप अपने प्रोजेक्ट के रूप में यह शायद बाहर की जाँच के लायक है बढ़ता जोड़ने की जरूरत पर निर्भर करता है classnames GitHub पर JedWatson द्वारा उपयोगिता। यह आपको एक वस्तु के रूप में अपने सशर्त वर्गों का प्रतिनिधित्व करने की अनुमति देता है और उन लोगों को लौटाता है जो सत्य का मूल्यांकन करते हैं।

एक उदाहरण के रूप में इसके रिएक्ट प्रलेखन से:

render () {

var btnClass = classNames({
  'btn': true,
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

return <button className={btnClass}>I'm a button!</button>;

} 

जब से राज्य परिवर्तन होता है, तब रिएक्ट फिर से प्रस्तुत करता है, आपके डायनामिक क्लास के नाम स्वाभाविक रूप से संभाले जाते हैं और आपके कंपोनेंट की स्थिति के साथ अद्यतित रहते हैं।

Comments

इस तरह की एक साधारण चीज के लिए क्लासनेम का उपयोग एक ओवरकिल है। इसका उपयोग करने से बचें और dannyjolie के सरल उत्तर का चयन करें

— चेकलिस्ट

क्या आप सुनिश्चित हैं कि यह एक साधारण बात है? हमेशा आप तत्वों पर लागू होते हैं क्या वर्गों पर ठीक दाने का पूरा नियंत्रण चाहते हैं।

— 12

@ जाँच करें अन्यथा मैं तर्क दूंगा, क्लासप्लेज़ पैकेज Gzipping से पहले 1.1kB है (और Gzipping के बाद आधा kB), कोई निर्भरता नहीं है, और वर्ग नाम हेरफेर के लिए बहुत क्लीनर एपीआई प्रदान करता है। जब एपीआई बहुत अधिक अभिव्यंजक है, तो समय से पहले कुछ छोटा करने की आवश्यकता नहीं है। मानक स्ट्रिंग हेरफेर का उपयोग करते समय आपको स्पेसिंग के लिए, हर सशर्त वर्ग नाम से पहले, या हर मानक वर्ग नाम के बाद याद रखना होगा।

— टोमुघेस

क्लासनेम बहुत अच्छा है, मैंने पाया कि प्रॉम्प्ट में जटिलता बढ़ने के कारण मैनुअल हेरफेर से पढ़ना, जोड़ना, और फिक्सिंग करना आसान था।

— MiFiHiBye

Answer 3

एक सरल संभव सिंटैक्स होगा:

<div className={`wrapper searchDiv ${this.state.something}`}>

Answer 4

यहां डायनामिक क्लासनेम के लिए सबसे अच्छा विकल्प है, बस कुछ कॉन्सेप्टेशन करें जैसे हम जावास्क्रिप्ट में करते हैं।

     className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

Comments

यह बिना किसी लाइनिंग मुद्दों के सबसे अच्छा समाधान है। एक जादू की तरह काम किया। धन्यवाद।

— रॉयल।

Answer 5

यदि आपको शैली के नामों की आवश्यकता है जो राज्य की स्थिति के अनुसार दिखाई देनी चाहिए, तो मैं इस निर्माण का उपयोग करना पसंद करता हूं:

<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>

Answer 6

हुक का उपयोग करके इसे आज़माएं:

        const [dynamicClasses, setDynamicClasses] = React.useState([
    "dynamicClass1", "dynamicClass2
]);

और इसे className विशेषता में जोड़ें:

<div className=`wrapper searchDiv ${[...dynamicClasses]}`>
...
</div>

वर्ग जोड़ने के लिए:

    const addClass = newClass => {
       setDynamicClasses([...dynamicClasses, newClass])
    }

वर्ग को हटाने के लिए:

        const deleteClass= classToDelete => {

           setDynamicClasses(dynamicClasses.filter(class = > {
             class !== classToDelete
           }));

        }

Answer 7

आप इस npm पैकेज का उपयोग कर सकते हैं । यह सब कुछ संभालता है और एक चर या फ़ंक्शन के आधार पर स्थिर और गतिशील वर्गों के लिए विकल्प होता है।

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />

Answer 8

getBadgeClasses() {
    let classes = "badge m-2 ";
    classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
    return classes;
}

<span className={this.getBadgeClasses()}>Total Count</span>

Answer 9

className={css(styles.mainDiv, 'subContainer')}

इस समाधान की कोशिश की जाती है और रिएक्ट SPFx में परीक्षण किया जाता है।

आयात विवरण भी जोड़ें:

import { css } from 'office-ui-fabric-react/lib/Utilities';