Question

我有这个jQuery灯箱插件：http://simplelightbox.com/

我无法在React应用上实现它。在一个简单的html应用程序中一切正常，但在React中却无法正常工作。大家可以帮我解决吗？谢谢。

在 index.html 页面上

<title>My website</title> 
  <link href="simplelightbox-master/dist/simplelightbox.min.css" rel='stylesheet' type='text/css'>
</head>

<body>        

  <div id="root"></div>   

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script type="text/javascript" src="simplelightbox-master/dist/simple-lightbox.min.js"></script>
  <script>
    $(function(){    
      var $gallery = $('.gallery a').simpleLightbox();     

   });

  </script>    

</body>

这里是我的React组件，我想展示灯箱图库

import React, { Component } from 'react'   

class Interiores extends Component {    


  render() {    
    return (
      <div>    
        <div className="gallery">
          <a href="../../simplelightbox-master/demo/images/image1.jpg" className="big"><img src="../../simplelightbox-master/demo/images/thumbs/thumb1.jpg" alt="" title="Beautiful Image" /></a>
      </div>            

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
     <script type="text/javascript" src="../../simplelightbox-master/dist/simple-lightbox.min.js"></script>               

      </div>
    )
  }      
}

export default Interiores;

Answer 1

您应该使用react-simplelightbox https://github.com/ts-de/react-simple-lightbox

Answer 2

我假设您使用的是构建工具，Webpack或类似工具？它不起作用的原因很可能是因为捆绑了项目后，组件呈现的script标签实际上并未引用任何内容，即未包含脚本，因为未导入脚本，因此构建工具不会不要将它们作为依赖项并包括在内。

如果您确实希望/需要以这种方式使用jQuery插件，则应通过import / require导入第三方脚本并将其用作script的源代码，以便导入构建工具正确：

import React, { Component } from 'react'   
import * as Lightbox from '../../simplelightbox-master/dist/simple-lightbox.min.js'

class Interiores extends Component {    
  render() {    
    return (
      <div>    
        <div className="gallery">
          <a href="../../simplelightbox-master/demo/images/image1.jpg" className="big"><img src="../../simplelightbox-master/demo/images/thumbs/thumb1.jpg" alt="" title="Beautiful Image" /></a>
      </div>            

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
     <script type="text/javascript" src={Lightbox}></script>               
      </div>
    )
  }      
}

export default Interiores;

但是，以这种方式使用jQuery时，React违反了React及其组件的本质。推荐的解决方案是使用第三方组件，如Haidangdevhaui推荐的组件。或者，因为灯箱实际上非常简单，所以只需创建自己的灯箱组件即可。 React state将派上用场。

Answer 3

该解决方案基于两个简单步骤：所有这些更改都在使用图库的组件中。

第一：您只需将以下注释行放到皮棉布上接受“ $”星号，它就不会产生错误消息。

/* global $ */
import React, { Component } from 'react'
    ...rest of the code here

第二：您需要将主jquery的插件函数放入React函数'conponentDidMount（）'

componentDidMount() {    
  $(function () {
    var $gallery = $('.gallery a').simpleLightbox();      
  });    
}

我测试了这些更改，并成功运行了

如何在ReactJS组件中使用jQuery灯箱图库？

3 个答案: