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