Vergrößern und Verkleinern des Bildes in React.js

Question

Ich verwende react-image-gallery, um Bilder auf einer Seite anzuzeigen. Und jetzt muss ich eine Zoom-in- und Zoom-out-Funktion beim Klick auf die Schaltfläche implementieren. Ich habe die Dokumentation von react-image-gallery gründlich gelesen, konnte aber nichts hilfreiches finden. Es gibt eine Requisite namens renderCustomControls, die ich verwendet habe, um Zoom-Funktionalität Schaltflächen in der oberen linken Ecke wie hier gezeigt zu zeigen:

Aber ich habe keine Ahnung, wie man das funktioniert. Jede Art von Hilfe wird geschätzt. Hier ist ein paar relevante Code:

export class CVPreview extends React.Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     images: [] 
    } 

    this.renderCustomControls = this.renderCustomControls.bind(this) 
    } 

    renderCustomControls() { 
    return(
     <span> 
     <FloatingActionButton mini={true} secondary={true}> 
      <ContentAdd /> 
     </FloatingActionButton> 
     <FloatingActionButton mini={true} secondary={true}> 
      <ContentRemove /> 
     </FloatingActionButton> 
     </span> 
    ) 
    } 

    render() { 
    const { openCVPreviewModal, onRequestClose } = this.props 

    return (
     <Dialog 
     className="cv-preview" 
     titleClassName="cv-preview-title" 
     contentClassName="cv-preview-content" 
     bodyClassName="cv-preview-body" 
     modal={false} 
     open={openCVPreviewModal} 
     autoDetectWindowHeight={false} 
     onRequestClose={onRequestClose}> 
     <IconButton 
      className='close-icon' 
      onClick={onRequestClose}> 
      <ClearIcon /> 
     </IconButton> 
     { 
      this.state.images.length > 0 && 
      <ImageGallery 
      items={this.state.images} 
      renderItem={this.renderItem} 
      renderLeftNav={this.renderLeftNav} 
      renderRightNav={this.renderRightNav} 
      showThumbnails={false} 
      showPlayButton={false} 
      showBullets={true} 
      showFullscreenButton={false} 
      renderCustomControls={this.renderCustomControls}/> 
     } 
     { 
      this.state.images.length === 0 && 
      <p className="no-images-msg"> 
      No preview images found. 
      </p> 
     } 
     </Dialog> 
    ) 
    } 
} 

Answer 1

Sieht aus wie es gibt keine Zoom-Fähigkeit in der Komponente selbst. Wahrscheinlich müssen Sie sich mit dem eigentlichen Bildobjekt herumschlagen (Bild skalieren und neu laden). Entweder das, oder Sie müssen nach einer anderen geeigneteren Komponente suchen.

Es gibt eine Reihe von Reaktionskomponenten, die ausschließlich zum Zoomen zur Verfügung stehen. Sie könnten vielleicht eine solche Komponente neben react-image-gallery