Увеличение и уменьшение изображения в React.js

Question

Я использую react-image-gallery для просмотра изображений на странице. И теперь мне нужно реализовать функцию масштабирования и масштабирования при нажатии кнопки. Я подробно ознакомился с документацией галереи изображений реакции, но я не нашел ничего полезного. Существует указатель с именем renderCustomControls, который я использовал для отображения кнопок функциональности увеличения в верхнем левом углу, как показано здесь:

Но я не знаю, как это сделать. Любая помощь будет оценена по достоинству. Вот какой-то соответствующий код:

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

Похоже, в компоненте нет возможности масштабирования. Вам, вероятно, придется возиться с самим объектом изображения (масштабируя изображение и перезагружая). Либо это, либо вам придется искать еще один подходящий компонент.

Существует множество реагирующих компонентов, предназначенных исключительно для целей масштабирования. Возможно, вы можете использовать один такой компонент вместе с ним. react-image-gallery