将 React 应用程序与 jquery 插件一起使用时出现类型错误

Question

我使用 react-create-app 命令创建了一个应用程序，我使用了 react 16。我也想使用 katrik-v fileinput（一个 jquery 插件）。那是我的代码：

import React, { Component } from 'react';
import { Grid, Cell }  from 'react-foundation';
import Header from './Heaader';
import $, { jQuery } from 'jquery';

class New extends Component {

componentDidMount(){
    $(document).find('#root').find('#test-upload').fileinput();
}


render(){
    return (
        <div>
          <Grid type="x">
               <Cell medium={2} large={2} >
                    <label htmlFor="image" className="text-right middle">
                           <p className="form-label">Images</p></label>
               </Cell>
               <Cell medium={8} large={8}>
                    <div className="file-loading">
                        <input id="test-upload" ref='fff' type="file" 
                        multiple />
                    </div>
               </Cell>
         </Grid>
      </div>)
}
}
export default New;

当我在 index.js 中调用它时：

ReactDOM.render(<App />, document.getElementById('root'));

我遇到了这个错误：

TypeError: __WEBPACK_IMPORTED_MODULE_4_jquery___default(...)(...).find(...).find(...).fileinput is not a function.
$(document).find('#root').find('#test-upload').fileinput()

有什么问题？
总的来说，这两个怎么合并？(一个jquery插件和react app)

Answer 1

为了在 React 应用程序中使用 jQuery 插件，您应该从 webpack 进程中拉出 jQuery。

将 jQuery 和插件作为静态文件或通过 CDN 在 public/index.html.

中使用 <script> 标签

要在 React 文件中使用 jQuery，请添加

/* global $ */

到您的 class 文件，就像导入行一样。

将 React 应用程序与 jquery 插件一起使用时出现类型错误

TypeError in using React app with jquery plugins

javascript

jquery

jquery-plugins

reactjs