Question

我尝试在Slider组件中导入一个jquery flexslider插件。但这给我错误“ $（this.el）.flexSlider（）不是函数”。并且在“我的文本编辑器”中，它还向我显示了Declier flexSlider变量，但从未使用过。

我将jquery加载到index.html文件和Slider组件中。在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（）不是一个函数”

Answer 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

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

导入jQuery插件在React应用程序中不起作用

1 个答案: