Gibt es sowieso Jquery in React Komponente zu verwenden

Question

Ich weiß, der richtige Weg ist nie, jquery mit ReactJS zu verwenden. Ich fange gerade an zu reagieren und muss meine Website in kurzer Zeit fertigstellen. Hier ist die URL: http://kyloxue.design/#/DesignHome?_k=311rh4 Ich benutze reagieren, um das gesamte Layout zu konstruieren. Wenn Sie die Seite zum ersten Mal besuchen, sind alle Bilder in einer Zeile. Ich möchte mit Jquery alle 3 Bilder in eine Spalte teilen. Es funktioniert jedoch nicht, wenn Sie nicht zweimal auf die Seite klicken (klicken Sie auf die Schaltfläche "Design" auf der linken Seite).

Im Folgenden sind mein Code für die Galerie Seite:

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); 
} 

Dinge, die **** Materie unterteilt sind wirklich. Im Grunde wickle ich einfach meinen jquery Code ein, um im componentdidMount zu sein. Ich weiß nicht, wie man das Css-Stylen mit React manipuliert. Jquery scheint eine schnelle Lösung zu sein. Gibt es das überhaupt, dass ich es schaffen kann, wenn ich nicht in einer DOM-Umgebung arbeite?

Answer 1

Ich habe das Problem herausgefunden. jQuery funktioniert tatsächlich in meinem Code. Ich verwende den falschen Lebenszyklus der Komponenten. Es sollte ComponentDidUpdate anstelle von ComponentDidMount sein.