चेतावनी: अज्ञात DOM संपत्ति वर्ग। क्या आपका मतलब था क्लासनेम?

Question

मैंने अभी-अभी रिएक्ट की खोज शुरू की है, एक घटक को एक साधारण रेंडर फ़ंक्शन के साथ जोड़कर:

render() {
  return <div class="myApp"></div>
}

जब मैं एप्लिकेशन चलाता हूं, तो मुझे निम्न त्रुटि मिलती है:

Warning: Unknown DOM property class. Did you mean className?

मैं बदल कर इस हल कर सकते हैं classकरने के लिए className।

प्रश्न है; क्या रिएक्ट इस अधिवेशन को लागू करता है? इसके अलावा मुझे classNameपारंपरिक के बजाय उपयोग करने की आवश्यकता क्यों है class? यदि यह प्रतिबंध है तो क्या यह जेएसएक्स सिंटेक्स या कहीं और के कारण है?

Answer 1

हाँ, इसका एक प्रतिक्रिया सम्मेलन:

चूंकि JSX जावास्क्रिप्ट है, ऐसे पहचानकर्ता classऔर forXML विशेषता नाम के रूप में हतोत्साहित होते हैं। इसके बजाय, प्रतिक्रिया डोम घटक क्रमशः classNameऔर जैसे डोम संपत्ति के नाम की उम्मीद करते htmlForहैं।

JSX गहराई में ।

Comments

मुझे यह बहुत बुरा लगता है। मुझे लगता है कि पार्सर को पता होना चाहिए कि संदर्भ के आधार पर दो भाषाओं के बीच संदर्भों को कैसे स्विच किया जाए, प्रोग्रामर और टूल पर बोझ को बनाए रखें

— जोनाथन

Answer 2

उल्का ES5 से ES6 (ES2015) को ट्रांसपाइल करने के लिए बैबेल का उपयोग करता है, इसलिए हम इसे एक सामान्य नोड एप्लिकेशन के रूप में डील कर सकते हैं जिसमें बैबल ट्रांसपिलर जोड़ा गया है।

आपको .babelrcअपने प्रोजेक्ट के रूट फ़ोल्डर में फ़ाइल जोड़ने की आवश्यकता है , और निम्नलिखित आइटम जोड़ें

{
  "plugins": [
    "react-html-attrs"
  ]
}

और हां, आपको इस प्लगइन को स्थापित करने की आवश्यकता है npm:

npm install --save-dev babel-plugin-reaction-html-attrs

Comments

धन्यवाद, मैं प्रतिक्रिया-फेसबुक-लॉगिन स्थापित करने के बाद "अमान्य डोम" को ठीक कर सकता हूं।

— काकाशी

Answer 3

React.js में वर्ग और गुणों के लिए कोई विकल्प उपलब्ध नहीं है, इसलिए हमें इसका उपयोग करने की आवश्यकता है

for   --> htmlFor
class --> className

Answer 4

आप किसी भी HTML टैग विशेषता के लिए कक्षा का उपयोग नहीं कर सकते क्योंकि JS का वर्ग का दूसरा अर्थ है। इसलिए आपको क्लास के बजाय क्लासनेम का इस्तेमाल करना होगा।

और इसके बजाय htmlFor विशेषता का उपयोग करें।

Answer 5

HTML में हम उपयोग करते हैं

class="navbar"

लेकिन React और ReactNative में HTML नहीं है, हम यहां JSX (जावास्क्रिप्ट XML) का उपयोग करते हैं

className="navbar"

Answer 6

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

   React.createElement('div', {attributes}, "Hello");

यदि हम className के बजाय क्लास का उपयोग करते हैं, तो प्रतिक्रिया इसे html वर्ग विशेषता के बजाय जावास्क्रिप्ट क्लास के रूप में परिभाषित करेगी। [कारण चर नाम 'वर्ग' पहले से ही जावास्क्रिप्ट कक्षा बनाने के लिए फ़ाइल में उपयोग किया जाता है और उसी उद्देश्य के लिए आरक्षित है]। जो गलत है और संकलक त्रुटि को फेंकता है, क्योंकि जावास्क्रिप्ट वर्ग html डोम तत्वों के लिए एक वैध संपत्ति नहीं है।

   React.createElement("p", {"class": "header"}, "Hello");

इसलिए क्लास के बजाय क्लासनेम का उपयोग करना आवश्यक है।

   React.createElement("p", {"className": "header"}, "Hello")