Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use React to complete a picture rotation component", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use React to complete a picture rotation component" this article.

To achieve the above functions using React, first, divide the components:

The component SlideM represents the component in the picture, and it always maintains a state:currentMIndex, that is, the index value of the current picture in the picture.

Component SlideS represents the mini-image component. You need to maintain two state:currentSIndex,currentSPage, that is, the index value of the current mini-image and the current number of pages of the mini-image.

The outer component SlideMS accepts several parameters as props:

, document.getElementById ('js-img-slide'))

SlideM and SlideS obtain parameters from SlideMS for internal rendering.

{self.setSmallIndex (index)}} / > {self.setMediumIndex (index)}} / >

When the switch button in the figure is clicked, the picture offset is calculated and the new currentMIndex is passed to the parent component, which setState notifies the two child components that the currentMIndex has changed

There are many calculations involved in the small image component, so we can extract these methods, such as calculating the number of small images on a page according to the given width of the middle image, calculating the total number of pages of the small image, judging which page the small image is currently on according to the given index value, and so on.

When you click the left and right arrows of the Mini component, calculate the offset of the image (first calculate how many small images there are in a middle image), and then setState modify the value of the Mini currentSPage. The parent component setState notifies the two child components that currentMIndex has changed

After receiving the change of the new value in the componentWillReceiveProps, the middle picture and the small picture components re-setState and update the state within the component to realize the communication between them.

The above is a train of thought to realize. In practical applications, the scene will be more complex. For example, there may be a need to play video in the first picture, and when you click on the middle picture, you can switch to the large image mode, which can be rotated normally, and when the large image mode is turned off, the medium image and the small picture automatically locate to the last picture you just viewed. At this point, slightly more complex operations will be involved, and compatibility needs to be done on this basis.

A very awkward point: the animation effect of the picture rotation is still using jquery's animate.

The above is all the contents of the article "how to use React to complete a picture rotation component". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.