web-dev-qa-db-ja.com

jQueryプラグインをReactに統合する方法

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と統合するにはどうすればよいですか？

javascriptjqueryreactjswebpackjquery-ui-plugins
3
Ramzan Chasygov

まず最初にair-datepickerではないReactコンポーネント、それはjQueryプラグインなので、例のようには動作しません。

次に、適切に機能させるには、jQueryをグローバルコンテキストで使用できるようにする必要があります。これを行うための最も簡単な方法は、<script>タグを使用してページに含めることです。 beforeプラグインスクリプトを含める必要があります。

本当に含まれていて、それがグローバルに利用できるかどうかを確認するには、Chrome console window.jQueryと入力してEnterを押すだけで、function (a,b){...}のようなものが返されます。 。そうでない場合、何か間違ったことをするときは、<script>タグのsrc属性を確認してください。

それをReactで機能させる方法は？

最も簡単な方法は、通常のJavaScriptのように、コンポーネント内のDOM要素のプラグインを初期化することです。

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>

個別のコンポーネントとして

非常にシンプルな日付ピッカー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ファイルを含めることも忘れないでください。

18
t1m0n

air-datepickerはReact-componentではありません。これは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を取得することです。 jQueryを依存関係としてair-datepicker/dist/js/datepicker.jsの最初の行に追加します

前：

  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コンポーネントとして適切に機能します。

3
Jayson Chiang