如何在反应中使用外部jquery插件答案

【问题标题】：how to use external jquery plugin in react如何在反应中使用外部jquery插件
【发布时间】：2019-02-11 20:32:35
【问题描述】：

我使用 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>

尼泊尔语日期组件

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}
            />
        );
    }
}

日期选择器没有出现。

【问题讨论】：

控制台是否有任何错误？
控制台上什么都没有。但是input 在点击后会被禁用。当我在 ** showDatePicker** 函数上控制台记录某些内容时，它会第一次记录。
您的代码对我有用。当我点击它时，它会显示日期选择器。
真的吗？让我尝试创建一个新项目并对其进行测试:)。
@TharakaWijebandara 它正在开发一个新项目。可能是我当前项目风格的z-index 或position 问题。非常感谢您为我指出这一点。

标签： javascript jquery reactjs

【解决方案1】：

可以使用“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>

);
}

【讨论】：

【解决方案2】：

只需按照尼泊尔语-日期选择器 github 页面上显示的说明，使用 npm install 安装库，并将 CDN 链接添加到您的 html 文件中的公共文件夹内的根元素上方的头元素内，希望这能解决您的问题。

【讨论】：