How Integrate Jquery Plugin In React
Solution 1:
First of all air-datepicker
is not React component, it's jQuery plugin, so it won't work like in your examples.
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.
To check if its really included and it available globally, just type in Chrome console window.jQuery
and 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
How to get it worked in React?
Well, the most simpliest way is just to initialize plugin on any DOM element in your component, like in regular JavaScript.
classMyComponentextendsReact.Component {
componentDidMount(){
this.initDatepicker();
}
initDatepicker(){
$(this.refs.datepicker).datepicker();
}
render(){
return (
<div><h3>Choose date!</h3><inputtype='text'ref='datepicker' /></div>
)
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('app')
);
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css"rel="stylesheet"/><divid="app"></div>
As separate component
Very simple datepicker React component example
classDatepickerextendsReact.Component {
componentDidMount(){
this.initDatepicker();
}
initDatepicker(){
$(this.refs.datepicker).datepicker(this.props);
}
render(){
return (
<inputtype='text'ref='datepicker'/>
)
}
}
classMyComponentextendsReact.Component {
render(){
return (
<div><h3>Choose date from React Datepicker!</h3><Datepickerrange={true} /></div>
)
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('app')
);
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css"rel="stylesheet"/><divid="app"></div>
Also don't forget to include css files.
Solution 2:
air-datepicker
is not the React-component. It is the jquery-plugin, so we can follow this tutorial https://reactjs.org/docs/integrating-with-other-libraries.html
importReactfrom'react'import $ from'jquery'import'air-datepicker/dist/js/datepicker.js'import'air-datepicker/dist/css/datepicker.css'classAirDatepickerextendsReact.Component {
componentDidMount(){
this.$el = $(this.el)
this.$el.datepicker()
}
render() {
return (
<div><inputref={el => this.el = el}/>
</div>
)
}
}
exportdefaultAirDatepicker
But it still not work cause the jquery
not the dependency of the air-datepicker
.
ReferenceError: jQuery is notdefined
./node_modules/air-datepicker/dist/js/datepicker.js
D:/demo/react/jq-plugin/datepicker/node_modules/air-datepicker/dist/js/datepicker.js:22362233 | }
2234 | };
2235 | })();
> 2236 | })(window, jQuery);
2237 |
2238 |
2239 | //////////////////
Follow the error message and the easiest way is to hake the air-datepicker
. Add jQuery
as the dependency in the first line of the air-datepicker/dist/js/datepicker.js
Before:
1 |;(function (window, $, undefined) { ;(function () {
2 | varVERSION = '2.2.3',
3 | pluginName = 'datepicker'
After:
> 1 |import jQuery from'jquery'2 |;(function (window, $, undefined) { ;(function () {
3 | varVERSION = '2.2.3',
4 | pluginName = 'datepicker'
Thus <AirDatepicker />
can works well as the React-component.
Solution 3:
My Solution is
import'stupid-table-plugin';
...
asynccomponentDidMount() {
window.$("table").stupidtable()
}
Post a Comment for "How Integrate Jquery Plugin In React"