ReactJS घटक नामों को बड़े अक्षरों से शुरू करना चाहिए?

Question

मैं JSBin पर ReactJS ढांचे के साथ खेल रहा हूं ।

मैंने देखा है कि अगर मेरे घटक का नाम लोअरकेस अक्षर से शुरू होता है तो यह काम नहीं करता है।

उदाहरण के लिए निम्नलिखित प्रस्तुत नहीं करता है:

var fml = React.createClass({
  render: function () {
    return <a href='google.com'>Go</a>
  }
});

React.render(<fml />, document.body);

लेकिन जैसे ही मैं इसके fmlसाथ प्रतिस्थापित करता हूं Fmlरेंडर करता है।

क्या कोई कारण है कि मैं छोटे अक्षरों के साथ टैग शुरू नहीं कर सकता हूं?

Comments

इस सवाल के जवाब की जाँच करें कुछ और धारावाहिकों के लिए: Html ब्राउज़र में नहीं दे रहा है - प्रतिक्रिया js

— मयंक शुक्ला

Answer 1

JSX में, लोअर-केस टैग नामों को HTML टैग माना जाता है। हालाँकि, डॉट-प्रॉपर्टी एक्सेसर के साथ लोअर-केस टैग नाम नहीं हैं।

HTML टैग बनाम रिएक्ट घटक देखें ।

• <component />React.createElement('component')(html टैग) के लिए संकलित
• <Component /> के लिए संकलित करता है React.createElement(Component)
• <obj.component /> के लिए संकलित करता है React.createElement(obj.component)

Comments

काउंटर में एक और आधा घंटा जोड़ें। मैं पागल हो रहा था, जैसे कुछ रेंडर करने की कोशिश कर रहा था let component = components[compType]; <component/>, और बकवास त्रुटियों को प्राप्त कर रहा था ।

— जेकज

मैंने कोशिश की है <components[name] />जो या तो काम नहीं करता है।

— 諭

मुझे विश्वास नहीं हो रहा है कि मैंने इस बात पर ध्यान नहीं दिया कि पहले ऐसा कोई नियम है।

— शोश

यह विचार अच्छा नहीं है। मैं यहां विनम्र हो रहा हूं।

— रॉल्फ

हां, यह n00bs के लिए बेहद ऑफ-पुटिंग हो सकता है, अगर Componentsइसके बजाय कॉल करते हैं components, तो उनकी प्यारी साइट बिना किसी त्रुटि के लोड होगी लेकिन कोई सामग्री नहीं!

— राजतंत्र

Answer 2

@Alexandre Kirszenberg ने बहुत अच्छा जवाब दिया, बस एक और विवरण जोड़ना चाहते थे।

रिएक्ट में divआदि जैसे जाने-माने तत्व नामों के श्वेतसूची का उपयोग किया जाता था, जो इसका उपयोग डोम तत्वों और रिएक्ट घटकों के बीच अंतर करने के लिए किया जाता था।

लेकिन क्योंकि उस सूची को बनाए रखने में यह सब मजेदार नहीं है, और क्योंकि वेब घटक कस्टम तत्वों को बनाना संभव बनाते हैं, उन्होंने इसे एक नियम बना दिया कि सभी रिएक्ट घटकों को ऊपरी मामले के अक्षर से शुरू होना चाहिए, या एक डॉट होना चाहिए ।

Comments

महान जानकारी, और भी बेहतर अगर वहाँ एक आधिकारिक डॉक्टर संदर्भ है। धन्यवाद।

— वाईकिट कुंग

यह कब बदला गया था?

— नोलवी

Answer 3

से आधिकारिक संदर्भ प्रतिक्रिया :

जब एक तत्व प्रकार एक लोअरकेस अक्षर से शुरू होता है, तो यह एक अंतर्निहित घटक को संदर्भित करता है जैसे कि या एक स्ट्रिंग 'डिव' या 'स्पैन' में परिणाम होता है जो कि React.createElement को पारित होता है। प्रकार जो कैपिटल अक्षर से शुरू होते हैं जैसे React.createElement (Foo) के संकलन और आपके जावास्क्रिप्ट फ़ाइल में परिभाषित या आयात किए गए घटक के अनुरूप।

यह भी ध्यान दें:

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

जिसका अर्थ है कि किसी को उपयोग करना है:

const Foo = foo;fooJSX में एक घटक तत्व के रूप में उपयोग करने से पहले ।

Answer 4

एक JSXटैग का पहला भाग रिएक्ट तत्व के प्रकार को निर्धारित करता है, मूल रूप से कुछ कन्वेंशन कैपिटलिज्ड, लोअरकेस, डॉट-नोटेशन है ।

पूंजीकृत और बिंदु संकेतन प्रकार संकेत मिलता है कि JSXटैग एक करने के लिए बात कर रहा है घटक प्रतिक्रिया, इसलिए यदि आप JSX का उपयोग <Foo />करने के लिए संकलन React.createElement(Foo)
या
<foo.bar />करने के लिए संकलन React.createElement(foo.bar)एक घटक परिभाषित करने या अपने जावास्क्रिप्ट फ़ाइल में आयात करने के लिए और अनुरूप हैं।

जबकि लोअरकेस प्रकार एक अंतर्निहित घटक को इंगित करता है जैसे <div>या <span>एक स्ट्रिंग में परिणाम 'div'या 'span'पास React.createElement('div')।

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

Answer 5

JSX में, XML को संगत बनाने के लिए React Classes को बड़ा किया जाता है, ताकि यह HTML टैग के लिए गलत न हो। यदि प्रतिक्रिया कक्षाएं पूंजीकृत नहीं हैं, तो यह पूर्व-परिभाषित JSX सिंटैक्स के रूप में एक HTML टैग है।