使用 jQuery 和 React 组件答案

【问题标题】：Use jQuery with React component使用 jQuery 和 React 组件
【发布时间】：2017-07-05 10:21:48
【问题描述】：

我想将 jquery 添加到我的 react 组件中，但出现错误：

TypeError: _jquery2.default.ajax 不是函数渲染时 (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，它已安装，但仍然无法正常工作。请问我该怎么做

【问题讨论】：

导入似乎有效。 $ 中有什么内容？

标签： jquery node.js reactjs

【解决方案1】：

render 函数用于将在页面上呈现的 HTML/React 组件，对于这样的东西，您将需要使用 componentDidMount 但如果您正在获取数据，那么您可能还需要考虑查看像 Redux 这样的东西可以帮助消除对 jQuery 的需求并处理诸如异步加载数据之类的事情。

【讨论】：

【解决方案2】：

你不应该在render方法中使用函数，在组件挂载之前使用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;

【讨论】：