javascript - 在 React.js 中放大和缩小图像

Question

我正在使用 react-image-gallery查看页面上的图像。现在我需要在单击按钮时实现放大和缩小功能。我已经仔细阅读了 react-image-gallery 的文档，但找不到任何有用的信息。有一个名为 renderCustomControls 的 Prop ，我用来在左上角显示缩放功能按钮，如下所示:

但我不知道该怎么做。任何形式的帮助将不胜感激。这是一些相关代码:

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 组件仅可用于缩放目的。您可以在 react-image-gallery

旁边使用一个这样的组件