JSX में मैंने स्ट्रिंग + {प्रोप} के रूप में एक क्लासनेम कैसे सेट किया

Question

मैं रिएक्ट करने के लिए थोड़ा नया हूं और स्ट्रिंग + प्रोप के रूप में एक क्लासनाम सेट करने की कोशिश कर रहा हूं। लेकिन मुझे यकीन नहीं है कि यह कैसे करना है और क्या यह सबसे अच्छा अभ्यास है।

तो मैं क्या करने की कोशिश कर रहा हूं, और यह स्पष्ट रूप से काम नहीं कर रहा है, क्या यह है:

<a data-featherlight='string' + {this.props.data.imageUrl}>

मैं इस बारे में कैसे लिखूंगा?

Answer 1

आप स्ट्रिंग संघनन का उपयोग कर सकते हैं

<a data-featherlight={'string' + this.props.data.imageUrl}>

या Template stringsनई ES2015 सुविधा का उपयोग करें

<a data-featherlight={ `string${this.props.data.imageUrl}` }>

Answer 2

आप भी इसे आजमा सकते हैं:

<a data-featherlight={'string1' + this.props.data.imageUrl + 'string2'}>

या

<a data-featherlight={ `string1 ${this.props.data.imageUrl} string2` }>

यदि आप लिंक घटक का उपयोग कर रहे हैं तो आप इस तरह से संघनन कर सकते हैं:

<Link to={`getting-started/${this.props.message}`}>
     <h1>Under {this.props.message}/-</h1>
</Link>

Answer 3

जहाँ तक मुझे पता है, पहला:

<a data-featherlight={'your string' + this.props.data.imageUrl}>

दूसरा:

<a data-featherlight={`your string ${this.props.data.imageUrl}`}>

Comments

यह 2016 से स्वीकृत उत्तर से कैसे भिन्न है?

— अर्जन

Answer 4

JSX में, क्लासनेम के नामकरण के लिए, आपके पास घुंघराले ब्रेसिज़ "{}" के बीच अपना स्ट्रिंग और प्रॉप्स होना चाहिए, क्योंकि कर्ली ब्रेस जेएसएक्स को जेएस के परिप्रेक्ष्य से जो भी अंदर का मूल्यांकन करने के लिए दर्शाते हैं। इसलिए आपको कोशिश करनी चाहिए

<a data-featherlight={'string' + this.props.data.imageUrl}>

Comments

यह 2016 से स्वीकृत उत्तर से कैसे भिन्न है?

— अर्जन