Question

我有这个React组件，可以从数据库渲染图像。该组件正在成功获取图像。但是jQuery库不起作用。当组件页面开始加载时，出现错误消息：

TypeError： __WEBPACK_IMPORTED_MODULE_3_jquery ___ default（...）（...）。simpleLightbox不是函数

这是指出错误原因的行：

 $('.gallery a').simpleLightbox();

这是插件的页面： https://github.com/andreknieriem/simplelightbox

这是我的React组件：

/* global $ */
import React, { Component } from 'react'
import axios from 'axios'  
import $ from 'jquery'

const URL_INTERIORS = 'http://localhost:3001/interiors';       

class Interiors extends Component {
  constructor(props) {
    super(props);
    this.state = {
      interiors: [],
      interiorsPhotos: [],          
    };      
    this.activateLightBox = this.activateLightBox.bind(this);
  }

  componentDidMount() {
    axios.get(URL_INTERIORS)
      .then(res => {
        this.setState({
          interiors: res.data[0],
          interiorsPhotos: res.data[0].photos          
        })
      })
     this.activateLightBox();
  }    

  componentWillUpdate() {
     this.activateLightBox();
  }


  activateLightBox() {
    $(function () {
      //Here is the line pointed as the errors' cause:
      $('.gallery a').simpleLightbox();
    })
  }

  render() {      

    const renderPhotos = currentItems.map((photo, index) => {    
      return (
        <a className="gal-img-js" href={`../images/${photo}.jpg`} key={index}>
          <img src={`../images/${photo}_thumb.jpg`} alt="" />
        </a>
      )
    });    

    return (      
        <div className="gallery images-box-1 big">
          { renderPhotos}           
        </div>          
      </div>
    );
  }
}

导出默认内饰

jQuery正在index.html文件中<script>末尾的header标记中调用。

//...rest of the code ommited
<title>My website</title>
  <script type="text/jsx" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>     
  <script type="text/jsx" src="simplelightbox-master/dist/simple-lightbox.js"></script>  
</head>
//...rest of the code ommited

有人知道如何解决吗？

Answer 1

您必须使用webpack中的插件提供程序来处理变量：

我在webpack.config中使用了类似的东西

new webpack.ProvidePlugin({
      jQuery    : 'jquery',
      $         : 'jquery',
}

我还将jquery脚本添加到index.html

取决于您的Webpack版本是您必须使用的方法：

在此处检查文档 https://webpack.js.org/plugins/provide-plugin/

Answer 2

我已经在您提供的库中的示例中重现了示例，它恰好安装了npm软件包，因此您可以安装它以做出反应，而不必在html中实现它，这是工作正常的代码< / p>

import React, { Component } from 'react';
import $ from 'jquery';
import './App.css';

$('.gallery a').on('error.simplelightbox', function (e) {
  console.log(e); // some usefull information
});

class App extends Component {
  render() {
    return (
      <div className="App">
       <div className="gallery">
          <a href="images/image1.jpg" className="big"><img src={require('./images/thumbs/thumb1.jpg')} alt="image1" title="Beautiful Image" /></a>
          <a href="images/image2.jpg"><img src={require('./images/thumbs/thumb2.jpg')} alt="image2" title="image2"/></a>
          <div className="clear"></div>
        </div>
      </div>
    );
  }
}

export default App;

这是修改后的代码：

// don't forget to npm install simplelightbox 
import React, { Component } from 'react' 
import axios from 'axios'  
import $ from 'jquery' // also don't forget to install jquery or implement it in html 



$('.gallery a').on('error.simplelightbox', function (e) {
  console.log(e); // some usefull information
});


const URL_INTERIORS = 'http://localhost:3001/interiors';       

class Interiors extends Component {
  constructor(props) {
    super(props);
    this.state = {
      interiors: [],
      interiorsPhotos: [],          
    };      
  }

  componentDidMount() {
    axios.get(URL_INTERIORS)
      .then(res => {
        this.setState({
          interiors: res.data[0],
          interiorsPhotos: res.data[0].photos          
        })
      })
  }    


  render() {      

    const renderPhotos = currentItems.map((photo, index) => {  // i suppose you already have access to currentItems from props or state
      return (
        <a className="gal-img-js" href={`../images/${photo}.jpg`} key={index}>
          <img src={`../images/${photo}_thumb.jpg`} alt="" />
        </a>
      )
    });    

    return (  
      <div> // you forgot div tag here    
        <div className="gallery images-box-1 big">
          { renderPhotos}           
        </div>          
      </div>
    );
  }
}
export default Interiors

React-JS-jQuery灯箱问题

2 个答案: