ReactJS मैनुअल वर्ग नामों

Question

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

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

कोई विचार?

धन्यवाद

Answer 1

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

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

या स्ट्रिंग टेम्पलेट संस्करण

className={`wrapper searchDiv ${this.state.something}`} बैकटिक साथ।

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

Answer 2

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

अपनी प्रतिक्रिया प्रलेखन से एक उदाहरण के रूप

तो:

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>; 

} 

के बाद से प्रतिक्रिया से चलाता है एक फिर से प्रस्तुत करना है जब वहाँ एक राज्य परिवर्तन है, आपके गतिशील वर्ग के नाम स्वाभाविक रूप से संभाला और राज्य के साथ तारीख तक रखा जाता है आपका घटक

Answer 3

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

// 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})} />