Javascript 如何在 React 中集成 jQuery 插件

How integrate jQuery plugin in React

提问by Ramzan Chasygov

I want to use https://github.com/t1m0n/air-datepickerwith in a React app, but it doesn't work.

我想在 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>

This produces:

这产生：

error($ is not defined)

Another approach:

另一种方法：

import React from 'react';
import $ from 'jquery';
import AirDatepicker from 'air-datepicker';

class Datepicker extends React.Component {
  render() {
    return(
      <AirDatepicker />
    )
  }
}

export default Datepicker;

Same error.

同样的错误。

How can I integrate a jQuery plugin with React?

如何将 jQuery 插件与 React 集成？

回答by t1m0n

First of all air-datepickeris not React component, it's jQuery plugin, so it won't work like in your examples.

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

Secondly, for proper work, jQuery should be availabel in global context, the most esiest ways to do this is to include it into page via <script>tag. It should be included beforeplugin script.

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

To check if its really included and it available globally, just type in Chrome console window.jQueryand press Enterit should return something like function (a,b){...}. If not, when you doing something wrong, check srcattribute of <script>tag, maybe it pointing to wrong destination

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

How to get it worked in React?

如何让它在 React 中工作？

Well, the most simpliest way is just to initialize plugin on any DOM element in your component, like in regular JavaScript.

嗯，最简单的方法就是在组件中的任何 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>

As separate component

作为单独的组件

Very simple datepicker React component example

非常简单的 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>

Also don't forget to include cssfiles.

也不要忘记包含css文件。

回答by Jayson Chiang

air-datepickeris not the React-component. It is the jquery-plugin, so we can follow this tutorial https://reactjs.org/docs/integrating-with-other-libraries.html

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

But it still not work cause the jquerynot the dependency of the air-datepicker.

但它仍然不起作用，因为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 | //////////////////

Follow the error message and the easiest way is to hake the air-datepicker. Add jQueryas the dependency in the first line of the air-datepicker/dist/js/datepicker.js

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

Before:

前：

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

After:

后：

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

Thus <AirDatepicker />can works well as the React-component.

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