javascript - 如何在 React 中使用外部 jquery 插件

标签 javascript jquery reactjs

我已经使用 CRA 构建了一个 React 项目。我需要使用一个使用 jquery 构建的插件。它是一个日期选择器,但它使用的日历是 Bikram Sambat。日期选择器代码的链接是 Nepali Date Picker .我做了以下事情:

public/index.html

<link href="%PUBLIC_URL%/assets/nepaliDatePicker.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="%PUBLIC_URL%/assets/nepaliDatePicker.min.js"></script>

NepaliDate 组件

import React, { Component } from 'react';

const $ = window.$;

export default class NepaliDate extends Component {
    shouldComponentUpdate() {
        return false;
    }
    componentDidMount() {
        $('.date-picker').nepaliDatePicker({
            dateFormat: '%D, %M %d, %y',
            closeOnDateSelect: true
        });
    }
    showDatePicker = () => {
        $('.date-picker').nepaliDatePicker();
    };
    render() {
        return (
            <input
                type="text"
                value=""
                name="date"
                className="date-picker"
                onFocus={this.showDatePicker}
            />
        );
    }
}

日期选择器未显示。

最佳答案

可以使用“react-load-script”加载第 3 部分 JS 库。安装后可以像下面这样使用 从 'react-load-script' 导入脚本

render(){
return(
<div>
 <Script url="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"/>
            <Script url="menu.js"/>
//.....Remaining code can be here

</div>

);
}

关于javascript - 如何在 React 中使用外部 jquery 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44612624/

相关文章:

java - Selenium WebDriver(Java) : JavascriptExecutor fails to click element, 而 WebElement.click() 效果很好

javascript - JQuery 中的 AJAX 调用出错

javascript - 类型错误 : Cannot read property 'split' of undefined

javascript - 如果方法在 jQuery 的数组中可用,则执行函数

reactjs - 无法使用导入文件中的类

reactjs - 按回车键后如何从 Material UI 文本字段中获取值?

javascript - 使用 JavaScript 中的日期函数转换日期时删除当前时间

jquery - mvc post 与 ajax 效果

javascript - Typescript - 输入 React 组件时的 IntrinsicAttributes 和子类型问题

jQuery - 获取单选或文本输入的值