रिएक्ट के जेएसएक्स सिंटैक्स में डबल घुंघराले ब्रेसिज़ का उद्देश्य क्या है?

Question

से react.js ट्यूटोरियल हम डबल घुंघराले ब्रेसिज़ के इस प्रयोग देखें:

<span dangerouslySetInnerHTML={{ __html: rawMarkup }} />

और फिर दूसरे ट्यूटोरियल में, "प्रतिक्रिया में सोच" :

 <span style={{ color: 'red' }}>
     {this.props.product.name}
 </span>;

हालाँकि, प्रतिक्रिया JSX दस्तावेज़ डबल घुंघराले ब्रेसिज़ का वर्णन या उल्लेख नहीं करता है। इस वाक्य रचना (डबल कर्ल) के लिए क्या है? और क्या jsx में एक ही चीज़ को व्यक्त करने का एक और तरीका है या यह प्रलेखन से सिर्फ एक चूक है?

Comments

प्रलेखन सेThe exterior set of curly braces are letting JSX know you want a JS expression. The interior set of curly braces represent a JavaScript object, meaning you’re passing in a object to the style attribute.

— सयान

Answer 1

यह सिर्फ एक वस्तु है, जो शाब्दिक रूप से मूल मूल्य में निहित है। यह वैसा ही है

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Comments

@BenAlpert जब मुझे एक पल मिलेगा तो मुझे खुशी होगी। अजीब तरह से, मैं वास्तव में संपादन दस्तावेज का आनंद लेता हूं (पिछले अवतार में एक कानूनी पत्रिका का संपादक था) और वहां होने वाले कुछ अन्य सुधार हो सकते हैं। पुनश्च, अभी भी बोल्डर में रह रहे हैं? चलो कुछ समय के लिए कॉफी या दोपहर का भोजन ले लो ... प्रतिक्रिया पर अंदर स्कूप के साथ किसी को जानना अच्छा होगा क्योंकि हम इसके साथ एक बड़ी परियोजना शुरू कर रहे हैं।

— बेन रॉबर्ट्स

@BenRoberts ग्रेट, धन्यवाद! दुर्भाग्य से मैं इन दिनों कैलिफ़ोर्निया में हूँ, लेकिन फ़्रीकोड पर #reactjs IRC के कमरे से ड्रॉप करने के लिए स्वतंत्र महसूस करता हूँ और मुझे सवालों के जवाब देने में खुशी होगी।

— सोफी अल्परट

@BenAlpert क्या आपको पता है कि इसके dangerouslySetInnerHTML={__html: rawMarkup}बजाय इसे बनाने के पीछे क्या सोच थी dangerouslySetInnerHTML={rawMarkup}? क्या ऐसा इसलिए है क्योंकि वस्तु {__html: rawMarkup}परस्पर है और एक तार नहीं है?

— ब्रायन कुंग

@ ब्रायन: github.com/facebook/react/issues/2256#issuecomment-63031960 (और github.com/facebook/react/blob/… ) देखें ।

— फेलिक्स क्लिंग

Answer 2

घुंघराले ब्रेसिज़ को यहाँ 2 उपयोग मिले हैं: -

1. {..} JSX में एक अभिव्यक्ति का मूल्यांकन करता है।
2. {key: value} का तात्पर्य एक जावास्क्रिप्ट ऑब्जेक्ट से है।

एक सरल उदाहरण देखते हैं।

<Image source={pic} style={{width: 193}}/>

यदि आप देखते हैं picकि ब्रेसिज़ से घिरा हुआ है। यह जेएसएक्स का एम्बेडिंग वेरिएबल का तरीका है। picकिसी भी जावास्क्रिप्ट अभिव्यक्ति / चर / वस्तु हो सकती है। आप {2 + 3} जैसा कुछ भी कर सकते हैं और यह {5} का मूल्यांकन करेगा

यहां स्टाइल को डिसाइड करते हैं। {width: 193}एक जावास्क्रिप्ट ऑब्जेक्ट है। और JSX में इस ऑब्जेक्ट को एम्बेड करने के लिए आपको घुंघराले ब्रेस की आवश्यकता होती है, इसलिए,{ {width: 193} }

नोट: JSX में किसी भी तरह के जावास्क्रिप्ट एक्सप्रेशन / वेरिएबल / ऑब्जेक्ट को एम्बेड करने के लिए आपको घुंघराले ब्रेस की आवश्यकता होती है।

Comments

मुझे यह उत्तर स्वीकार किए गए उत्तर की तुलना में अधिक व्याख्यात्मक लगता है।

— रोहित मंडीवाल

@RohitMandiwal धन्यवाद सर। मुझे पता है कि यह थोड़ा गड़बड़ है जब आपको एक घुंघराले ब्रेस दूसरे के अंदर मिला।

— माव 55

Answer 3

यदि आपको पता नहीं है, {{color: 'red'}}तो styleटैग में क्यों उपयोग किया जाता है

<span style={{color: 'red'}}>
    {this.props.product.name}
</span>;

रिएक्ट आधिकारिक दस्तावेज के अनुसार , स्टाइल विशेषता सीएसएस स्ट्रिंग के बजाय जावास्क्रिप्ट ऑब्जेक्ट को स्वीकार करती है ।

Answer 4

रिएक्ट JSX का उपयोग करता है, JSX में किसी भी चर, राज्य वस्तु, अभिव्यक्ति आदि को {} में संलग्न किया जाना है।

JSX में इनलाइन स्टाइल देते समय, इसे एक ऑब्जेक्ट के रूप में निर्दिष्ट करना होता है इसलिए इसे फिर से घुंघराले ब्रेस के अंदर होना चाहिए। {}।

यही कारण है कि घुंघराले ब्रेसिज़ के दो जोड़े हैं

Answer 5

इसका मतलब यह है कि एक स्टाइल वैरिएबल घोषित करने के बजाय, जिसे आप इच्छित स्टाइल प्रॉपर्टीज के ऑब्जेक्ट पर सेट कर सकते हैं, इसके बजाय आप स्टाइल प्रॉपर्टीज को एक ऑब्जेक्ट में सेट कर सकते हैं ... यह आमतौर पर एक बेस्ट प्रैक्टिस है जब आप जिस स्टाइल को जोड़ना चाहते हैं वह कुछ के लिए होता है ऐसा तत्व जिसे स्टाइल चर घोषित करने के लिए अधिक स्टाइल की आवश्यकता होती है

उदाहरण के लिए कम स्टाइल प्रॉपर्टी वाले तत्व के लिए ऐसा करें

<span style={{color: 'red'}}>
  {this.props.product.name}
</span>

अधिक शैली गुणों वाले HTML तत्व के लिए यह करते हैं

const spanStyle = {
   backgroundColor: 'red',
   color: 'grey',
   margin: '-25px'
}

तो आप इसे jsx सिंटैक्स के साथ कहते हैं

<span style={spanStyle}>
  {this.props.product.name}
</span>

Answer 6

मैं इसे सरल शब्दों में सबके लिए समझने की कोशिश करता हूं। नीचे दिए गए कोड:

<span dangerouslySetInnerHTML={{__html: rawMarkup}} />

के बराबर है

<span 
     dangerouslySetInnerHTML={ {__html: rawMarkup} } 
/>

इसलिए, यदि हमें किसी संपत्ति के लिए एक शाब्दिक वस्तु सौंपने जा रहे हैं तो बस हमें प्रतिक्रिया अभिव्यक्ति का उपयोग करना चाहिए ।

कुछ लोग जो मुख्य रूप से AngularJs से ReactJs की ओर बढ़ रहे हैं, संभवतः यह AngularJs के एक्सप्रेशन बाइंडिंग ऑपरेटर {{}} के साथ भ्रम का एक हिस्सा है । इसलिए, इसे ReactJs में अलग तरह से देखने की कोशिश करें।

Comments

स्वरूपण को छोड़कर आपके दो कोड टुकड़े बिल्कुल समान हैं।

— जुल्म

@jcollum - बिलकुल उसकी बात। डबल ब्रेस "ऑपरेटर" एक ऑपरेटर नहीं है जो वह दिखा रहा था। यह html टेम्प्लेटिंग इंजनों में बस इतना सामान्य है कि यह प्रतिक्रिया में अजीब लगता है।

— आआआआआआआआआआआआआआआआआआआआआआआआ

मैं अभी भी नहीं मिलता है

— एंड्रयू लैम

@AndrewLam - बस इसे संपादित किया। क्या अब आप इसे समझ सकते हैं?

— एहसान

Answer 7

डबल घुंघराले ब्रैकेट की मेरी व्याख्या यह है कि स्टाइल ऑब्जेक्ट केवल एक जावास्क्रिप्ट ऑब्जेक्ट को स्वीकार करता है, इसलिए ऑब्जेक्ट को सिंगल कर्ली ब्रैकेट के अंदर होना चाहिए।

style={jsObj}

शैली की कलाकृतियों के लिए वस्तु मुख्य है: मूल्य जोड़े (एक सरणी बनाम शब्दकोश) और उस वस्तु को इस प्रकार व्यक्त किया जाता है, उदाहरण के लिए {color:'#ffffff'},।

तो आपको मिल गया है:

style = { jsObj }

तथा

jsObj = {color:'#ffffff'}

बीजगणित की तरह, जब आप स्थानापन्न करते हैं, तो यह खड़ा होता है:

style = { {color:'#ffffff'} }