ReactコンポーネントでJqueryを使用する方法はありますか

Question

ReactJSでjqueryを使用しないでください。私はちょうど反応を開始し、短い時間で私のウェブサイトを終了する必要があります。ここにURLがあります：http://kyloxue.design/#/DesignHome?_k=311rh4 私は反応を使ってレイアウト全体を構築しています。 最初にページにアクセスすると、すべてのイメージが1行に収まります.Jqueryを使用して3つのイメージを1つの列にスライスします。ただし、ページを2回クリックしない限り（左の「デザイン」ボタンをクリックしないと）動作しません。 ****本当に重要分割されている

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環境で作業していないときに動作させることができますか？

Answer 1

問題を見つけました。 jQueryは実際に私のコードで動作します。誤ったコンポーネントライフサイクルを使用しています。 ComponentDidMountではなくComponentDidUpdateである必要があります。