在react中使用jQuery动态更改图片路径遇到的问题

[crazyxb]

您好。如题。我在代码中是这样写的。
step:1 为了将默认的小图片列表从上方移到左边，我设置了template

Viewer.TEMPLATE = (
    '<div class="viewer-container">' +
      '<div class="viewer-canvas"></div>' +
      '<div class="viewer-navbar">' +
          '<ul class="viewer-list" ></ul>' +
      '</div>' +
      '<div class="viewer-footer">' +
        '<div class="viewer-title"></div>' +
        '<ul class="viewer-toolbar">' +
          '<li class="viewer-zoom-in" data-action="zoom-in"></li>' +
          '<li class="viewer-zoom-out" data-action="zoom-out"></li>' +
          '<li class="viewer-one-to-one" data-action="one-to-one"></li>' +
          '<li class="viewer-reset" data-action="reset"></li>' +
          '<li class="viewer-prev" data-action="prev"></li>' +
          '<li class="viewer-play" data-action="play"></li>' +
          '<li class="viewer-next" data-action="next"></li>' +
          '<li class="viewer-rotate-left" data-action="rotate-left"></li>' +
          '<li class="viewer-rotate-right" data-action="rotate-right"></li>' +
          '<li class="viewer-flip-horizontal" data-action="flip-horizontal"></li>' +
          '<li class="viewer-flip-vertical" data-action="flip-vertical"></li>' +
        '</ul>' +
      '</div>' +
      '<div class="viewer-tooltip"></div>' +
      '<div class="viewer-button" data-action="mix"></div>' +
      '<div class="viewer-player"></div>' +
    '</div>'
  );

step:2 初始化

$('.images').viewer({
       inline: true
})
<ul className="images" id= "images">
    {
        that.state.imagesData.map(function (v, i) {
             var id = v.id
             var content = 'http://192.168.2.202:8090/httpfiletrans/HttpFileTrans?'+
                           'method=download&FilePath=';
             if (that.state.changeInmageOrigin == true && that.state.chooseImageId == v.id) {
                    content += [v.targetImagePath](url)
              } else {
                    content += v.aiResultImagePath
             }
            if (v.aiResult == 1) { 
                   return (<li ><img src={content} name={id}/></li>)
             } else {
                  return (<li className='tipsbox' ><img src={content} name={id}/></li> )
            }
       })
      }
 </ul>
 <div className='seeOrigin' ><Checkbox onChange={this.onChange}>查看原图</Checkbox></div>

step3: 点击查看原图切换url

 onChange = (e) => {
        var changeImageOrigin = e.target.checked;
        var chooseImageNum = $('.viewer-active>img')[0].name;
        this.setState({
            hasMore: false,
            changeInmageOrigin: changeImageOrigin,
            chooseImageId: chooseImageNum
        }, () => {
            $('.images').viewer('destroy')
            $('.images').viewer({
                inline:true
            })
        })
    }

我使用了 $('.images').viewer('destroy')然后再重新加载，这样在第一张图片点击查看原图时是没有问题，当点击其他图片的时候都会默认选择到第一张图片。我曾经试过用update但是没有效果，请问这种情况应该怎么解决，万分感谢！

当我把
$('.images').viewer('destroy')
$('.images').viewer({
      inline:true
 })
改为
$('.images').viewer({
      inline:true
 }).viewer()
时，我在页面查看了下。
显示的图片还是原来的没有改变。因为增加在左边显示的图片列表里的url还是原来的没有改变，
而viewer.js默认展示在上方的图片列表里的url是改变了的。