javascript - 如何在 React 中使用 jQuery 插件

问题描述

我想在我的网站上使用一些插件，这些插件完全由 react 完成。问题是我不明白如何在不使屏幕变黑的情况下在反应组件中运行它。我在网上尝试了我能理解的方法，但没有奏效。

例如，我想在导航栏上使用 dropotron

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';

import BookModal from './modals/BookModal';
import UserInfoModal from './modals/UserInfoModal';
import GroupReservationModal from './modals/GroupReservationModal';
import ThankYouModal from './modals/ThankYouModal';

import $ from 'jquery';

class Header extends React.Component {
    constructor(props){
        super(props);
        this.state ={
            showModal: false,
            showUserInfoModal: false,
            showGroupReservationModal: false,
            showThankYouModal: false
        };
        this.openModal = this.openModal.bind(this);
        this.exitModal = this.exitModal.bind(this);
        this.switchModalUserInfo = this.switchModalUserInfo.bind(this);
        this.switchModalGroupReservation =                                this.switchModalGroupReservation.bind(this);
        this.switchModalThankYou = this.switchModalThankYou.bind(this);
    }

    componentDidMount(){
      	$('#nav > ul').dropotron({
				alignment: 'left',
				hideDelay: 350,
				mode: 'slide'
			});
    }

    //omitted some functions
    render(){
        return (
            //JSX i want to apply dropotron to
            <div>
                <header id="header" >
                    
                    <nav id="nav">
                        <ul>
                            <li>
                                <a><span className="icon fa-angle-down"></span> Experiences</a>
                                <ul>
                                    <li><a href="/experience1">Experience1</a></li>
                                    <li><a href="/experience2">Experience2</a></li>
                                </ul>
                            </li>
                        
                            <li>
                                <a><span className="icon fa-angle-down"></span> More</a>
                                    <ul>
                                        <li><a href="/contact">Contact</a></li>
                                        <li><a href="/franchise">Franchise</a></li>
                                        <li><a href="/gift">Gift Card</a></li> 
                                       
                                    </ul>
                            </li>
                            <li>
                                <a 
                                    id="navbar-book"
                                    onClick={this.openModal} 
                                    href="#"
                                    className="book-button">
                                    <span onClick={this.openModal} >Book Now</span>
                                </a>
                            </li>
                            <li className="special">
                                <a href="#menu" className="menuToggle" ><span>Menu</span></a>
                            </li>
                        </ul>
                    </nav>
                </header>
            </div>
        )
    }
};


export default Header;

我复制粘贴了组件中的插件确实安装了，但它除了让屏幕变黑之外什么也没做。我也尝试过创建一个单独的函数并从 componentDidMount 调用它。

我想使用很多 jquery 插件，但我只是不明白它们是如何通过一般反应来实现的。

我的文件层次结构如下：

指数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>asfasfd</title>
        <link rel="icon" type="image/png" href="/images/favicon.png">

    </head>
    <body>
        <div id="app"></div>
        <script src ="/bundle.js"></script>
    </body>
</html>

应用程序.js

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './routers/AppRouter';
import 'normalize.css/normalize.css';
import './css/bundle.css';
import './css/modal.css';
import Footer from './components/Footer'

ReactDOM.render(<AppRouter />,document.getElementById('app'));

Approuter 只是使用 react-router dom 来加载作为它们自己组件的页面。

我以前从未使用过 jquery，只是学习了 react，因此将它们一起使用会令人困惑。对于一些更有用的资源的任何答案或方向将不胜感激。

标签： javascriptjqueryreactjs

javascript - 如何在 React 中使用 jQuery 插件

问题描述

解决方案

推荐阅读