javascript - React 中如何集成 jQuery 插件

Question

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

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){...} 的内容.如果不是，当你做错事时，检查src <script> 的属性标签，可能指向错误的目的地

如何让它在 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 文件。