如何在React中集成jQuery插件

Question

我有https://github.com/t1m0n/air-datepicker，我想将它挂在React中，但它不起作用。 我尝试： 1.

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>

错误（$没有定义） 2.我尝试这样

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

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

 
export default Datepicker;

同样的错误，请帮我弄清楚！

Answer 1

的所有air-datepicker首先是没有反应过来组件，它的jQuery插件，所以它不会像你的例子工作。

其次，适当的工作，jQuery的应该是在全球范围内availabel，要做到这一点最esiest方式是通过<script>标签把它列入到页面。它应该包含之前的插件脚本。

要检查它真的包含，它在全球上市，只需要输入在Chrome控制台window.jQuery，然后按Enter键它应该返回类似function (a,b){...}。如果不是，当你做错了什么，检查src属性<script>标签，也许它指向错误的目的地

如何获得它的工作中反应是？

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

作为单独的部件

很简单日期选择器阵营组分例如

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文件。