我想用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 集成？
首先air-datepicker 不是 React 组件，它是 jQuery 插件，因此它不会像您的示例中那样工作。
其次，为了正常工作，jQuery 应该在全局上下文中可用，最简单的方法是将其包含到页面中<script>标签。应该包括在内before插件脚本。
要检查它是否真的包含在内并且在全球范围内可用，只需在 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 files.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
