有沒有反正在React組件中使用jquery

我知道正確的方法是從來沒有使用jQuery與ReactJS。我只是開始反應，需要在很短的時間內完成我的網站。這裏是網址：http://kyloxue.design/#/DesignHome?_k=311rh4 我正在使用react來構建整個佈局。當您第一次訪問該頁面時，所有圖像都在一行中，我想要的是使用Jquery將每3張圖像切分成一列。但是，除非您單擊頁面兩次，否則它不起作用（單擊左側的「設計」按鈕）。有沒有反正在React組件中使用jquery

以下是我爲畫廊頁面代碼：

export class Gallery extends Component { 

componentDidMount() { 
    {/* *****************jquery slice image ****************** */} 
    var $vw = $('.wrapper').height(); 
    var $imageEach = $('.image-grid-each'); 
    var $myimage = $('.image-grid-each img'); 
    var $imageW = $(".image-grid-image").width(); 
    var $imageH = $(".image-grid-image").height(); 
    for (var i = 0; i < $imageEach.length; i += 3) { 
      $imageEach.slice(i, i+3).wrapAll("<div class='image-grid-slice'></div>"); 

     } 
{/* *****************jquery slice image ****************** */} 
    this.props.loadImages(); 
    } 


handleThumbClick(selectedImage) { 
    this.setState({ 
    selectedImage 
    }) 
} 

render(){ 
const {images, selectedImage, selectImage} = this.props; 
return (
    <div > 
    <SkyLight hideOnOverlayClicked ref="simpleDialog"> 
      <img className="modalPhoto" src={selectedImage} /> 
    </SkyLight> 

    <div className="flex-box"> 
     {images.map((image, index) => (
     <div key={index} onClick={() => {selectImage(image); this.refs.simpleDialog.show()}} className="image-grid-each"> 
       <img className="image-grid-image" src={image}/> 
     </div> 
    ))} 
    </div> 
    </div> 
) 
} 
} 

function mapStateToProps(state) { 
return { 
    images: state.images, 
    selectedImage: state.selectedImage 
    } 
} 

function mapActionCreatorsToProps(dispatch) { 
    return bindActionCreators(GalleryActions, dispatch); 
}

的事情，真正的問題分爲****。基本上我只是將我的jquery代碼包裝在componentdidMount中。我不知道如何操縱使用React的CSS樣式。 Jquery似乎是一個快速修復。那麼無論如何，當我不在DOM環境中工作時，我可以使它工作？

來源

2016-04-30 tiancaishi

我想通了這個問題。 jQuery實際上在我的代碼中工作。我使用了不正確的組件生命週期。它應該是ComponentDidUpdate而不是ComponentDidMount。

來源

2016-05-01 18:47:58 tiancaishi

有沒有反正在React組件中使用jquery

回答

相關問題