在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__images」仍然粘連，其父格「產品intro__details」。該列的每一個已被放置一個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：還有另一個JavaScript，當然，命名爲粘kit.min.js這已被稱爲一個需要方法我的application.js

來源

2017-08-07 Andrew Sunset

在裏面您的組件的渲染：

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

則：

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

你甚至可以做到這一點在裁判回調直接：

ref={el => $(el).stick_in__parent()}

但請記住，使用React代碼直接管理DOM的東西並不是一個好主意，它取決於插件 - 但可能會出現意外的行爲或副作用。

您可能還需要清理的componentWillUnmount(){}

確保您import $ from 'jquery'和插件也是如此。

來源

2017-08-07 11:08:48

嗯，我試過你的答案，它的工作！非常非常感謝你！ –

在React的JSX中初始化jQuery函數

回答

相關問題