Question

我知道正确的方法是永远不要在ReactJS上使用jquery。我刚开始做出反应，需要在很短的时间内完成我的网站。以下是网址：http://kyloxue.design/#/DesignHome?_k=311rh4 我正在使用react来构建整个布局。当您第一次访问该页面时，所有图像都在一行中，我想要的是使用Jquery将每3个图像切割成一列。但是，除非您单击页面两次（单击左侧的“设计”按钮），否则它不起作用。

以下是我的图库页面代码：

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实际上在我的代码中工作。我使用不正确的组件生命周期。它应该是ComponentDidUpdate而不是ComponentDidMount。

无论如何在React组件中使用Jquery

1 个答案: