Hello. Such as the title. This is what I wrote in the code.
step:1 to move the default list of small pictures from the top to the left, I set 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 initialization

$(".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: Click to view the original image and switch 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
            })
        })
    }

I used $(".images"). Viewer ("destroy") and then reloaded it so that there is no problem when the first image is clicked to view the original image, and the first image is selected by default when clicking on other images. I have tried to use update but no effect, I would like to ask how to solve this situation, thank you very much!

$(".images").viewer("destroy")
$(".images").viewer({
      inline:true
 })

$(".images").viewer({
      inline:true
 }).viewer("update")

url
viewer.jsurl