ReactのJSXでjQuery関数を初期化する

おはよう、みんな。私はJSXの内側に、このjQueryの「スティッキー・キット」機能を初期化するために、すべての週末をしようとしてきたとのことができていない：ReactのJSXでjQuery関数を初期化する

$(".product-intro__images").stick_in_parent({ 
    offset_top: 10 
})

それはJSX内部に入るように私はその後、私はそれを置き、それを配置しました別のJavascriptファイルで私は実際にコンソールをチェックして、GETの呼び出しが働いていますが、何も起こりません。 ReactJSは仮想DOMと連携しているため、同期に問題があるはずです。

ご覧のとおり、「product-intro__images」という名前のクラスを呼び出すと、「product-intro」という名前の親div内の列です。あなたがそれを見ることができる。ここ：

<div className="product-intro__images"> 
     <div className="product-gallery"> 
      <ul className="product-gallery-thumbs__list"> 
      {images.map(function(imageProps) { 
       return (
       <li className="product-gallery-thumbs__item" key={ imageProps.src }> 
        <img src={ imageProps.src } alt={ imageProps.alt } /> 
       </li> 
      ); 
      })} 
      </ul> 
      <div className="flexslider"> 
       <ul className="slides product-gallery-images__list"> 
        <li className="product-gallery-images__item"><img src={("http://placehold.it/1000x1000/76BD22")} /></li> 
        <li className="product-gallery-images__item"><img src={("http://placehold.it/1000x1000/FFC82E")} /></li> 
        <li className="product-gallery-images__item"><img src={("http://placehold.it/1000x1000/0084D9")} /></li> 
        <li className="product-gallery-images__item"><img src={("http://placehold.it/1000x1000/76BD22")} /></li> 
        <li className="product-gallery-images__item"><img src={("http://placehold.it/1000x1000/FFC82E")} /></li> 
        <li className="product-gallery-images__item"><img src={("http://placehold.it/1000x1000/0084D9")} /></li> 
       </ul> 
      </div> 
     </div> 
    </div>

この一つとしてスクロールすることになっている「製品-intro__details」という名前の別の1がありますただ、この欄の横に、「製品intro__imagesは、」親のdivに貼りまま。この列のそれぞれはconstの内部、ひいては、それは次のようにレンダリングしているコンポーネントの内部に配置されています

return 
(
    <body id="product-page" className={modalClass} > 
    <section className="page-section ps-product-intro"> 
     <div className="container"> 
     <div className="product-intro"> 
      {ProductImages} 
      {ProductDetails} 
     </div> 
     </div> 
    </section> 
    </body>

だから基本的に、ここでのことだ：どのように私はこのjQueryの関数を呼び出すことになってんですか？

PS：私application.jsで

出典

2017-08-07 Andrew Sunset

を内部で必要とする方法により、既に呼び出されているコースの他のJavaScript、という名前は、スティッキー・kit.min.jsがありますあなたのコンポーネントのrender：

<div className="product-intro__images" ref={el => this.productIntro = el}>

その後、

：

componentDidMount(){ 
    $(this.productIntro).stick_in_parent() 
}

あなたも直接参照コールバックでこれを行うことができます：

を

しかし、あなたのためにDOMを管理するものを直接リアクションコードで混ぜるのは良い考えではなく、プラグインに依存しますが、予期しない動作や副作用が発生する可能性があります。

また必ずimport $ from 'jquery'やプラグインなども行いますcomponentWillUnmount(){}

にクリーンアップする必要があるかもしれません。

出典

2017-08-07 11:08:48

私はあなたの答えを試してみました。本当にありがとう！ –

ReactのJSXでjQuery関数を初期化する

答えて

関連する問題