导入 jquery 插件在反应应用程序中不起作用

Posted 2023-05-09

【中文标题】导入 jquery 插件在反应应用程序中不起作用

【英文标题】：importing jquery plugin is not work in react app

【发布时间】：2019-10-12 15:31:11

【问题描述】：

我尝试在 Slider 组件中导入一个 jquery flexslider 插件。但它给了我错误“ $(this.el).flexSlider() 不是函数”。在我的文本编辑器中，它还显示我声明了 flexSlider 变量但从不使用。

我在 index.html 文件和 Slider 组件中加载 jquery。在我通过 npm 安装的 import flexslider 中的 Slider 组件中。

import React from 'react';
import $ from 'jquery';
import flexSlider from 'flexslider';

class Slider extends React.Component 
  componentDidMount()
    this.$el = $(this.el);
    this.$el.flexSlider();
  
  render()
    return (
      <div className="slider" ref=el=> this.el = el>
        this.props.children
      </div>
    )
  
;

export default Slider;

这给了我错误“ $(this.el).flexSlider() 不是函数”

【问题讨论】：

我认为您需要检查如何正确导入 flex 滑块

在文档中他们只给出了使用脚本标签的例子。他们没有关于 es6 导入语句的信息

我也试试其他插件。

【参考方案1】：

创建一个组件jQuery，示例（components/Jquery.js:

import React from 'react'
import jQuery from 'jquery' // Import directly from node-modules
window.jQuery = jQuery

export default () => (jQuery)

在您的组件中，您将使用一个 jQuery 插件，例如 (components/Slider.js)：

import React, Component from 'react'
import $ from './Jquery' // Import component
import flexSlider from 'flexslider' // Import directly from node-modules

class Slider extends Component 
    componentDidMount() 
         $(".hero-slider").flexslider(
            controlNav: true,
            directionNav: false,
            animation: "fade"
        );
    

    render = () => (
        <div className="hero hero-slider">
        <ul className="slides">
            <li data-bg-image="dummy/slider-1.jpg">
            <div className="container">
                         <h3 className="slider-subtitle">Your header goes here</h3>
            <h2 className="slider-title">Professional</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa molestiae necessitatibus possimus ducimus facere, error, nostrum. Quos sapiente ducimus maxime odio alias dolor consequuntur, maiores commodi exercitationem veniam. Id, ex?</p>
            <a href="#" className="button large">Read more</a>
            </div>
        </li>
                 <li data-bg-image="dummy/slider-2.jpg">
            <div className="container">
                <h3 className="slider-subtitle">Your header goes here</h3>
            <h2 className="slider-title">Professional</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In maiores illo eligendi obcaecati reiciendis, vel perspiciatis aliquid esse architecto deleniti asperiores, laboriosam nemo rerum! Ipsam numquam delectus minus iure sit!</p>
            <a href="#" className="button large">Read more</a>
            </div>
        </li>
        <li data-bg-image="dummy/slider-3.jpg">
            <div className="container">
            <h3 className="slider-subtitle">Your header goes here</h3>
            <h2 className="slider-title">Professional</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam iure, alias error suscipit porro quidem minus, autem repellendus rerum labore corrupti! Quia quas, architecto, quis non pariatur quisquam nisi magnam.</p>
            <a href="#" className="button large">Read more</a>
            </div>
        </li>
        </ul>
    </div>
    )


export default Slider

只是一个例子。理解这一点以在您的代码中实现。