如何在 React 中集成 jQuery 插件

Question

我想在 React 应用程序中使用https://github.com/t1m0n/air-datepicker ，但它不起作用。

 import React from 'react'; import AirDatepicker from 'air-datepicker'; class Datepicker extends React.Component { render() { return( <AirDatepicker /> ) } } export default Datepicker; `

 <script src="./../bower_components/jquery/dist/jquery.min.js"></script>

这产生：

error($ is not defined)

另一种方法：

 import React from 'react'; import $ from 'jquery'; import AirDatepicker from 'air-datepicker'; class Datepicker extends React.Component { render() { return( <AirDatepicker /> ) } } export default Datepicker;

同样的错误。

如何将 jQuery 插件与 React 集成？

Answer 1

首先air-datepicker不是 React 组件，它是 jQuery 插件，所以它不会像你的例子那样工作。

其次，为了正常工作，jQuery 应该在全局上下文中可用，最简单的方法是通过<script>标签将其包含到页面中。 它应该包含在插件脚本之前。

要检查它是否真的包含在内并且全局可用，只需在 Chrome 控制台window.jQuery输入并按Enter它应该返回类似function (a,b){...} 。 如果没有，当你做错事时，检查<script>标签的src属性，也许它指向错误的目的地

如何让它在 React 中工作？

嗯，最简单的方法就是在组件中的任何 DOM 元素上初始化插件，就像在常规 JavaScript 中一样。

 class MyComponent extends React.Component { componentDidMount(){ this.initDatepicker(); } initDatepicker(){ $(this.refs.datepicker).datepicker(); } render(){ return ( <div> <h3>Choose date!</h3> <input type='text' ref='datepicker' /> </div> ) } } ReactDOM.render( <MyComponent />, document.getElementById('app') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/> <div id="app"></div>

作为单独的组件

非常简单的 datepicker React 组件示例

 class Datepicker extends React.Component { componentDidMount(){ this.initDatepicker(); } initDatepicker(){ $(this.refs.datepicker).datepicker(this.props); } render(){ return ( <input type='text' ref='datepicker'/> ) } } class MyComponent extends React.Component { render(){ return ( <div> <h3>Choose date from React Datepicker!</h3> <Datepicker range={true} /> </div> ) } } ReactDOM.render( <MyComponent />, document.getElementById('app') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/> <div id="app"></div>

也不要忘记包含css文件。

Answer 2

air-datepicker不是 React 组件。 它是 jquery-plugin，所以我们可以按照这个教程https://reactjs.org/docs/integrating-with-other-libraries.html

import React from 'react'
import $ from 'jquery'
import 'air-datepicker/dist/js/datepicker.js'
import 'air-datepicker/dist/css/datepicker.css'

class AirDatepicker extends React.Component {
    componentDidMount(){
        this.$el = $(this.el)
        this.$el.datepicker()
    }

    render() {
        return (
            <div>
                <input ref={el => this.el = el}/>
            </div>
        )
    }
}

export default AirDatepicker

但它仍然不起作用，因为jquery不是air-datepicker的依赖项。

ReferenceError: jQuery is not defined
./node_modules/air-datepicker/dist/js/datepicker.js
D:/demo/react/jq-plugin/datepicker/node_modules/air-datepicker/dist/js/datepicker.js:2236
  2233 |         }
  2234 |     };
  2235 | })();
> 2236 |  })(window, jQuery);
  2237 | 
  2238 | 
  2239 | //////////////////

按照错误消息，最简单的方法是获取air-datepicker 。 在air-datepicker/dist/js/datepicker.js的第一行添加jQuery作为依赖

之前：

  1 |;(function (window, $, undefined) { ;(function () {
  2 |    var VERSION = '2.2.3',
  3 |        pluginName = 'datepicker'

之后：

> 1 |import jQuery from 'jquery'
  2 |;(function (window, $, undefined) { ;(function () {
  3 |    var VERSION = '2.2.3',
  4 |        pluginName = 'datepicker'

因此<AirDatepicker />可以很好地作为 React 组件。

Answer 3

我的解决方案是

import 'stupid-table-plugin';
...


async componentDidMount() {
   window.$("table").stupidtable()
}