时间戳

首页 > 解决方案 > 动态 jquery 图像库不适用于 ReactJS

javascript - 动态 jquery 图像库不适用于 ReactJS

问题描述

我在 ReactJS 渲染上使用 jquery 有两个带有“画廊”类（所需插件的类）的 div。第一个是由手工代码制作的，并且运行良好。第二个是通过连接变量、字符串和标签标签的循环动态生成的。在第二个 div 中 - 缩略图的图像及其各自的 href（放大的图像版本）完美地出现在屏幕上，但它的动画不起作用。有人知道如何解决吗？

下面调用的函数：

componentDidMount() {
    axios.get(URL_INTERIORES)
      .then(res => {
        this.setState({ interiores: res.data })
      })    

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

React 的渲染图：

return (
      <div>

        // NOTE: This Gallery is working succefully.

        <div className="gallery">
          <a href="../images/int_02.jpg" className="big">
            <img src="../images/int_02_thumb.jpg" alt=""/>
          </a>
          <a href="../images/int_02.jpg" className="big">
            <img src="../images/int_02_thumb.jpg" alt=""/>
          </a>
          <a href="../images/int_02.jpg" className="big">
            <img src="../images/int_02_thumb.jpg" alt=""/>
          </a>
        </div>

        /*
        NOTE: This dinamic galley is showed but here isn't 
              the animation working.
        */                       

          {this.state.interiores.map(item =>
          <div>
          <div className="gallery">
            {
            item.fotos
              .map(foto =>
                <a href={`../images/${foto}.jpg`} className="big">                       
                   <img src={`../images/${foto}_thumb.jpg`} alt="" />
                </a>
              )
            }

          </div>
     </div>
  )}

标签： javascriptjqueryreactjs

解决方案

我找到了解决方案。我也把相同的函数体componentDidMount()放在里面
componentDidUpdate()。现在它正在成功运行。

    componentDidMount() {
      axios.get(URL_INTERIORES)
        .then(res => {
          this.setState({ interiores: res.data })
      })    

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

  // Here is the new code insertion: 

  componentDidUpdate() {
    $(function () {
      $('.gallery a').simpleLightbox();      
    });
  }

推荐阅读