使用jQuery與之反應成分

Question

我想的jQuery添加到我的反應組件，但我有一個錯誤：

TypeError: _jquery2.default.ajax is not a function at render (C:\xampp\htdocs\formation\delicious-server\tmp\webpack:\src\routes\Xml.js:10:5)

我的代碼是非常簡單的：

var React = require('React'); 
import $ from 'jquery'; 

var Xml = React.createClass({ 
render: function(){ 

    $.ajax({ 
      url: 'config.xml', 
      dataType: 'xml', 
      cache: false, 
      success: function(data) { 
      data = xmlToJson(data); 
      console.log(data); 
      }.bind(this) 
     }); 
     return (<p>data</p>); 
    } 
}); 

module.exports = Xml; 

我做了npm install --save jquery，它的安裝但它仍然不起作用。我應該怎麼做

Answer 1

渲染功能是爲HTML/React組件在頁面上呈現，對於這樣的東西，你會想要使用componentDidMount，但是如果你正在提取數據，那麼你可能也想考慮尋找類似Redux的東西，這可以幫助消除對jQuery的需求並處理諸如異步加載數據之類的東西。

Answer 2

你不應該使用的功能在渲染方法，使用componentWillMount方法Ajax調用函數之前，組件安裝

var Xml = React.createClass({ 
     componentWillMount: function() { 

     $.ajax({ 
      url: 'config.xml', 
      dataType: 'xml', 
      cache: false, 
      success: function(data) { 
      data = xmlToJson(data); 
      console.log(data); 
      }.bind(this) 
     }); 
     }, 

     render:function(){ 
     <p>data</p> 
     } 
    }); 

module.exports = Xml;