如何将jQuery插件集成到React中 [英] How integrate jQuery plugin in React

问题描述

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

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

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集成在一起?

How can I integrate a jQuery plugin with React?

推荐答案

首先air-datepicker 不是React组件，它是jQuery插件，因此它无法像您的示例中那样工作.

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

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

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 before plugin script.

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

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

如何在React中使用它?

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

Well, the most simpliest way is just to initialize plugin on any DOM element in your component, like in regular 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组件示例

Very simple datepicker React component example

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

这篇关于如何将jQuery插件集成到React中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！