2014-10-17 7 views
28

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

<!-- base.html --> 
<html> 
    <head> 
    <title>Note Cards</title> 
    <script src="http://fb.me/react-0.11.2.js"></script> 
<!--  <script src="http://fb.me/JSXTransformer-0.11.2.js"></script> --> 
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 
    {% load staticfiles %} 
    <link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}"> 
    <script src="{% static "build/react.js" %}"></script> 
    </head> 
    <body> 
    <h1 id="content">Note Cards</h1> 
    <div class="gotcha"></div> 
    </body> 
</html> 

ध्यान दें कि मैं यहां django की स्थिर स्थिर फ़ाइलों का उपयोग कर रहा हूं। मेरे जावास्क्रिप्ट में थोड़ा और अधिक जटिल है, इसलिए मैं यह सब यहाँ पोस्ट नहीं होगा जब तक कि कोई यह अनुरोध करता है, लेकिन त्रुटि के साथ लाइन यह है:

React.renderComponent(
    CardBox({url: "/cards/?format=json", pollInterval: 2000}), 
    document.getElementById("content") 
); 

जो बाद मैं 'लक्ष्य कंटेनर प्राप्त एक डोम नहीं है तत्व त्रुटि 'अभी तक ऐसा लगता है कि document.getElementById ("सामग्री") लगभग निश्चित रूप से एक DOM तत्व है।

मैंने this स्टैक ओवरफ्लो पोस्ट देखा, लेकिन यह मेरी स्थिति में मदद नहीं कर रहा था।

किसी को भी कोई विचार है कि मुझे यह त्रुटि क्यों मिल रही है?

उत्तर

53

मैंने इसे समझ लिया!

this blog post को पढ़ने के बाद मुझे एहसास हुआ कि इस लाइन के स्थान:

<script src="{% static "build/react.js" %}"></script> 

गलत था। </body> टैग से ठीक पहले, उस लाइन को <body> अनुभाग में अंतिम पंक्ति होने की आवश्यकता है। रेखा को नीचे ले जाने से समस्या हल हो जाती है।

इस के लिए मेरी व्याख्या यह है कि <body> टैग की बजाय प्रतिक्रिया <head> टैग के बीच आईडी की तलाश में थी। इस वजह से इसे content आईडी नहीं मिला, और इस प्रकार यह वास्तविक डोम तत्व नहीं था।

+14

वैकल्पिक रूप से (और शायद एक अच्छा विचार), एक ऑनलोड/तैयार श्रोता में 'React.render' कॉल को लपेटना है। फिर इससे कोई फर्क नहीं पड़ता कि आपने स्क्रिप्ट टैग कहां रखा है क्योंकि नोड मौजूद होगा। –

+0

@ पॉलो'शहननेस अहह जो समझ में आता है! मैं भी ऐसा करूंगा। – lnhubbell

3

इसके अलावा, एचटीएमएल फ़ाइल के नीचे अपने <script></script> को स्थानांतरित करने का सबसे अच्छा अभ्यास भी इसे ठीक करता है।

+0

हाँ, प्रतिक्रिया 16.2 का उपयोग करके और यह मेरी समस्या थी –

संबंधित मुद्दे