जेएसएक्स कोड में मेरे जावास्क्रिप्ट कोड

Question

से लिखे गए प्रतिक्रिया घटक को कैसे लोड किया जाए, मैं प्रतिक्रियाओं के लिए नया हूं इसलिए कृपया मुझे क्षमा करें यदि मैं इस प्रश्न को सही तरीके से वाक्यांश नहीं दे सकता। तो मेरे पास यह जेएसएक्स स्क्रिप्ट फ़ाइल है जो मेरे प्रतिक्रिया घटकों को मेरे दृश्य में लोड होने के तुरंत बाद प्रस्तुत करती है। प्रारंभ में इस स्क्रिप्ट फ़ाइल में मेरे पास मेरे घटक में दिखाने के लिए कोई डेटा नहीं है, इसलिए मैं अपने उप-घटकों में से कोई भी प्रस्तुत नहीं करता हूं। हालांकि, बाद के बिंदु पर, जब मुझे डेटा प्राप्त होता है, तो एक वेब सेवा कहें, मैं उस डेटा के साथ घटकों को फिर से प्रस्तुत करना चाहता हूं।

मेरी जेएसएक्स स्क्रिप्ट फ़ाइल में घटकों के पास कोई राज्य नहीं है, यह केवल उस डेटा को दिखाना है जिसे मैं पास करता हूं।

जेएसएक्स स्क्रिप्ट ठीक लोड करती है और जेएसएक्स फ़ाइल में निर्दिष्ट डेटा के साथ घटकों को प्रस्तुत करती है। हालांकि जब मैं उस घटक को फिर से किसी अन्य जावास्क्रिप्ट फ़ाइल में प्रस्तुत करने का प्रयास करता हूं, तो यह मुझे संदर्भ त्रुटि देता है, घटक अपरिभाषित होता है।

क्या जेएसएक्स राष्ट्र,/*** @jsx React.DOM */एक पूरी तरह से अलग नामस्थान बनाते हैं? यदि ऐसा है तो मैं इसे कैसे एक्सेस कर सकता हूं? और अपनी जेएसएक्स स्क्रिप्ट फ़ाइल के बाहर से नए डेटा के साथ घटकों को दोबारा प्रस्तुत करने का सबसे अच्छा तरीका क्या है। अग्रिम में धन्यवाद! :)

/** संपादित */ दोस्तों, कोड जोड़ने के लिए खेद नहीं है .. इसके बजाय मुझे सवाल सरल बनाने दें .. मैं अपने जावास्क्रिप्ट फ़ाइल से अपने जेएसएक्स स्क्रिप्ट में प्रतिक्रिया घटक कैसे प्राप्त कर सकता हूं?

var Avatar = React.createClass({ 
render: function() { 
return (
    <div> 
    <ProfilePic username={this.props.username} /> 
    <ProfileLink username={this.props.username} /> 
    </div> 
); 
} 
}); 

var ProfilePic = React.createClass({ 
render: function() { 
return (
    <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} /> 
); 
} 
}); 

var ProfileLink = React.createClass({ 
render: function() { 
return (
    <a href={'http://www.facebook.com/' + this.props.username}> 
    {this.props.username} 
    </a> 
); 
} 
}); 

React.render(
<Avatar username="pwh" />, 
document.getElementById('example') 
); 

तो, इसके बाद के संस्करण कोड jsx स्क्रिप्ट के रूप में specifed या बाहर से भरी हुई अपने html टैग में एम्बेड किया जा सकता:

/** संपादित */ ठीक है दोस्तों, यहाँ एक कोड उदाहरण है। अवतार तत्व (उत्तराधिकारी में सबसे अधिक प्रतिक्रिया घटक) में उपयोगकर्ता नाम प्रोप नोटिस करें, समस्या यह है कि हम एक अलग उपयोगकर्ता नाम के साथ किसी अन्य जावास्क्रिप्ट फ़ाइल में अवतार घटक को फिर से प्रस्तुत कैसे कर सकते हैं? यह सब ठीक है और ठीक है, अगर आप इसे इस तरह स्थापित करते हैं और चलाते हैं। पहली बार घटक लोड होता है, यह उपयोगकर्ता नाम के रूप में pwh सेट करता है। हालांकि, मैं अपने जावास्क्रिप्ट (यानी जेएसएक्स स्क्रिप्ट के बाहर) से इस तत्व को कैसे एक्सेस कर सकता हूं और इसे नए उपयोगकर्ता नाम मान के साथ पुन: प्रस्तुत कर सकता हूं? क्या यह भी संभव है?

Answer 1

मुझे लगता है कि सादा जेएस फ़ाइल निष्पादित होने पर आप बी/सी समस्या का सामना कर रहे हैं, जेएसएक्स फ़ाइल का अभी भी JSXTransformer द्वारा अनुवाद किया जा रहा है, इस प्रकार ब्राउज़र द्वारा संसाधित नहीं किया गया है। इसलिए JSX फ़ाइलों के अंदर प्रतीकों अभी तक परिभाषित नहीं कर रहे थे

दो दृष्टिकोण मैं सिफारिश करेंगे कर रहे हैं:

विकास/प्रोटोटाइप प्रयोजनों के लिए: सादा जे एस फ़ाइल के लिए /** @jsx React.DOM */ जोड़ने के रूप में अच्छी तरह से है, और इस JS फ़ाइल शामिल करना न भूलें एचटीएमएल पेज में type="text/jsx" के रूप में ट्रांसफॉर्मर भी अनुवाद करने का प्रयास करेगा।

कोड है कि, उत्पादन में जाना jsx संकलक npm install -g react-tools स्थापित करते हैं, तो jsx <src file> <output filename> चलाने नियमित जावास्क्रिप्ट

करने के लिए अपने JSX फ़ाइल बदलने को यह देखने के लिए क्या मतलब है के लिए: http://facebook.github.io/react/docs/tooling-integration.html

पी.एस. आप अपने एप्लिकेशन एंट्री पॉइंट को DOM.ready कॉलबैक या कुछ समकक्ष सही के अंदर लपेट रहे हैं?