reactjsコンポーネントでlightslider jqueryプラグインを使用するにはどうすればいいですか？

Question

これはライトライダーギャラリーをレンダリングする際の私のコードです。私の問題は、jqueryギャラリーが正しく表示されないことです。写真はレンダリングしますが、スタイルは使用しません。レンダリングを開始する前に、componentDidMountのマウントについて読んだことがあります。 verticalリストのマークアップは、ライトライダーギャラリーの使用方法に関するものです。

あなたはどう思われますか？どうすればjqueryプラグインを使用し、それをreactjsコンポーネント経由でレンダリングできますか？

render(){ 
    const photodata = this.props.gallery; 
    const datax = photodata.data; 

    return(
     <div> 
      {datax.map(function(object,i){ 
       let standardprops = object.properties; 
       let photos = standardprops.Photos; 

       { 
        return(
         object.properties.Photos.map(function(fields){ 
          let photo = fields.photos; 
          let thumb = fields.thumbnail; 

          return (
           <ul id="vertical"> 
            <li key={fields.i} data-thumb={thumb} data-src={photo}> 
             <img src={photo} className="img-responsive" /> 
            </li> 
           </ul> 
          ) 
         }) 
        ) 
       } 

      })}  
     </div> 
    ) 
} 

Answer 1

componentDidMountについてのドキュメントを読んだ後、私はこの解決策を考え出しました。また、私はこれですインテリサイトからそれを得た：https://egghead.io/lessons/react-using-react-with-the-fullcalendar-jquery-plugin

componentDidMount(){ 

    const {vertical} = this.refs; 

    $(vertical).lightSlider({ 
     gallery:true, 
     item:1, 
     slideMargin:0, 
     speed:500, 
     auto:false, 
     loop:true, 
     adaptiveHeight:true, 
     vertical:true, 
     verticalHeight:600, 
     vThumbWidth:220, 
     thumbItem:4, 
     thumbMargin:5, 
     onSliderLoad: function(el) { 
      el.lightGallery({ 
       selector: '.vertical .lslide' 
      }); 
     }, 
     responsive : [ 
      { 
       breakpoint:1025, 
       settings: { 
        item:1, 
        slideMove:1, 
        gallery:true, 
        thumbItem:8, 
        vThumbWidth:120 
       } 
      }, 
      { 
       breakpoint:769, 
       settings: { 
        item:1, 
        slideMove:1, 
        gallery:true, 
        thumbItem:8, 
        vThumbWidth:100, 
        verticalHeight:450 
       } 
      }, 
      { 
       breakpoint:737, 
       settings: { 
        item:1, 
        slideMove:1, 
        gallery:false, 
        thumbItem:0, 
        } 
      }, 
      { 
       breakpoint:668, 
       settings: { 
        item:1, 
        slideMove:1, 
        gallery:false, 
        thumbItem:0, 
        } 
      }, 
      { 
       breakpoint:641, 
       settings: { 
        item:1, 
        slideMove:1, 
        gallery:false, 
        thumbItem:0, 
        } 
      }, 
      { 
       breakpoint:480, 
       settings: { 
        item:1, 
        slideMove:1, 
        gallery:false, 
        thumbItem:0, 
       } 
      } 
     ] 
    }); 
} 

レンダリングも今異なっています。 ulを地図の中に入れるのではなく、私はそれを外側に置いた。refs〜vertical

render(){ 
const photodata = this.props.gallery; 
const datax = photodata.data; 

return(
    <div> 
     <ul ref="vertical"> 
     {datax.map(function(object,i){ 
      let standardprops = object.properties; 
      let photos = standardprops.Photos; 

      { 
       return(
        object.properties.Photos.map(function(fields){ 
         let photo = fields.photos; 
         let thumb = fields.thumbnail; 

         return (

           <li key={fields.i} data-thumb={thumb} data-src={photo}> 
            <img src={photo} className="img-responsive" /> 
           </li> 

         ) 
        }) 
       ) 
      } 

     })} 
     </ul> 
    </div> 
)}