如何在 React 组件中导入 jQuery？

Question

我的 JS 文件包含 jQuery (apiCalls.js)：

function getBlogInfo() {
$.ajax({
    url: "http://api.tumblr.com/v2/blog/myblog.tumblr.com/info?api_key=my-api-key",
    dataType: 'jsonp',
    success: function(info){
      console.log(info);
      console.log(info.response.blog.likes);
    }
  }
)}  
export { getBlogInfo };

我的 React 组件：

import React, { Component } from 'react';
import $ from 'jquery';
import { getBlogInfo } from './scripts/apiCalls';

class Homepage extends Component {
       componentDidMount(){
        getBlogInfo();

      }
  render() {
    return (
      <div className="homepage">

      </div>
    );
  }
}

export default Homepage;

如果我用整个脚本替换componentDidMount() 中的getBlogInfo()，那么脚本会按预期执行，但是使用函数调用来执行脚本会给我一个错误提示 -

./src/components/scripts/apiCalls.js
  Line 2:  '$' is not defined  no-undef

到目前为止我所尝试的：

在我所有的反应文件中从 'jquery' 导入 $。

通过脚本标签在 index.html 中导入 jquery 库

Answer 1

尝试在你的 react 项目中添加 jquery npm。

npm install jquery --save

然后像这样使用。

import $ from 'jquery';