2016-07-03 9 views
17

मुझे अपने कोड में एक समस्या मिली जब मैं अपने दो संस्करणों को मेरे रिएक्ट संस्करण 15.2.0 में उपयोग करने का प्रयास कर रहा था, फिर भी, मुझे एक वर्कअराउंड मिला लेकिन मैं जानना चाहता हूं कि कोई बेहतर समाधान है या नहीं।ReactJS: React.render एक फ़ंक्शन नहीं है और React.createElement एक फ़ंक्शन नहीं है

//app.jsx 
var React = require('react'); 

var ThumbnailList = require('./thumbnail-list'); 

var options = { 
    ThumbNailData: [{ 
    title : 'Download the ISO', 
    number : 32, 
    header : 'Learning React', 
    description: 'The best library for creating fast and dynamic websites.', 
    imageUrl : 'image source' 
    },{ 
    title : 'Download the ISO', 
    number : 64, 
    header : 'Learning Gulp', 
    description: 'Speed your development framework!', 
    imageUrl : 'image source' 
    }], 
}; 

var element = React.createElement(ThumbnailList,options); 
React.render(element, document.querySelector('.container')); 

तो, जब भी मैं अपने index.html फ़ाइल कुछ भी नहीं चलाने का प्रयास प्रदर्शित किया जाता है लेकिन यह पहली त्रुटि कंसोल में आता है: React.render एक समारोह नहीं है। मैंने पाया है कि यह इसलिए होता है क्योंकि के इस नए संस्करण की जरूरत प्रतिक्रिया प्रतिक्रिया-डोम, जो है,

//app.jsx 
var React = require('react-dom'); 

var ThumbnailList = require('./thumbnail-list'); 

var options = { 
    ThumbNailData: [{ 
    title : 'Download the ISO', 
    number : 32, 
    header : 'Learning React', 
    description: 'The best library for creating fast and dynamic websites.', 
    imageUrl : 'image source' 
    },{ 
    title : 'Download the ISO', 
    number : 64, 
    header : 'Learning Gulp', 
    description: 'Speed your development framework!', 
    imageUrl : 'image source' 
    }], 
}; 

var element = React.createElement(ThumbnailList,options); 
React.render(element, document.querySelector('.container')); 

अब समस्या हल हो रहा है, लेकिन अब दूसरी समस्या आता है जब आप फिर से index.html चलाने का प्रयास: प्रतिक्रिया। क्रिएटमेंट एक समारोह नहीं है। मैं क्या कुछ शब्दों में, की आवश्यकता होती है प्रतिक्रिया, वह यह है कि एक और चर जोड़ने के लिए

var React = require('react-dom'); 
var React2 = require('react'); 
var ThumbnailList = require('./thumbnail-list'); 

var options = { 
    ThumbNailData: [{ 
     title : 'Download the ISO', 
     number : 32, 
     header : 'Learning React', 
     description: 'The best library for creating fast and dynamic websites.', 
     imageUrl : 'image-source' 
    },{ 
     title : 'Download the ISO', 
     number : 64, 
     header : 'Learning Gulp', 
     description: 'Speed your development framework!', 
     imageUrl : 'image-source' 
    }], 
}; 

var element = React2.createElement(ThumbnailList,options); 
React.render(element, document.querySelector('.container')); 

, React.createElement

की समस्या को हल करने के लिए React.render

var React = require('react-dom') 

की समस्या को हल करने के लिए था

var React2 = require('react') 

मेरे प्रश्न हैं:

  1. प्रतिक्रिया-डोमेन ने React.createElement के साथ समस्या क्यों बनाई?

  2. क्या यह प्रतिक्रिया के इस नए संस्करण की वजह से है?

  3. प्रतिक्रिया-डोम का आह्वान किए बिना इन समस्याओं को हल करने के लिए कोई बेहतर तरीका है और प्रतिक्रिया?

किसी भी विचारों और टिप्पणियों की सराहना कर रहे हैं;)

उत्तर

35

सबसे पहले, के बाद से v0.14 प्रतिक्रिया, इस नए पैकेज react-dom कहा जाता है। यह "पर्यावरण" को सार तत्व बनाता है जिसे आप प्रतिक्रिया देंगे, और, आपके मामले में, ब्राउज़र है।

https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#two-packages-react-and-react-dom

तो, जब से तुम अब दो संकुल है: "react" अपने प्रतिक्रिया घटक बनाने के लिए और "react-dom" "एकीकृत" ब्राउज़र के साथ प्रतिक्रिया करने के लिए, आप सही तरीकों कॉल करने की आवश्यकता है कि में से हर एक उन्हें प्रदान करता है।

फिर, अपने सवालों का जवाब दे:

Why the react-dom created the problem with React.createElement?

पैकेज है कि React.createElementreact है और नहींreact-dom

Is it because of this new version of React?

हाँ, आप (react पैकेज से) React.render अब और कॉल करने के लिए सक्षम नहीं हैं, तो आप (पैकेज react-dom से) ReactDOM.render उपयोग करने के लिए की जरूरत है।

Is there a better approach to solve these problems without having to invoke react-dom and react?

मैं एक "समस्या" के रूप में यह नहीं दिख रहा है, तो आप सिर्फ जानते हैं कि डोम हेरफेर करने के लिए एक विशेष पैकेज नहीं है पता करने की जरूरत। साथ ही, यह एक "अच्छा" पैटर्न है, क्योंकि यदि आप कभी भी अपने घटकों को एक HTML (इसे सर्वर का उपयोग करके प्रस्तुत करने के लिए) प्रस्तुत करना चाहते हैं, तो आपको बस कुछ चीजों को अनुकूलित करने की आवश्यकता है और आपका कोड वही होगा।

1

मैं त्रुटि हो रही थी: "React.createElement कार्य नहीं है" और मेरी स्थिति के लिए ठीक इस बदलने के लिए किया गया था: import React from "react"; import ReactDOM from "react-dom"; यह एक टाइपप्रति फ़ाइल में था तो मैं यकीन नहीं है: import * as React from "react"; import * as ReactDOM from "react-dom"; यह करने के लिए यह गैर-टाइपस्क्रिप्ट पर लागू होता है या नहीं।

+0

मुझे एक ही त्रुटि/फिक्स था। मेरे पास आयात प्रतिक्रिया, "प्रतिक्रिया-मूल" से {टेक्स्ट, टच करने योग्य हाइलाइट}; और इसे आयात 'प्रतिक्रिया' से प्रतिक्रिया; "प्रतिक्रिया-मूल" से आयात {टेक्स्ट, टच करने योग्य हाइलाइट}; –

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