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

Question

我正在使用react-image-gallery来查看页面上的图像.现在我需要在按钮点击时实现放大和缩小功能.我已经对react-gallery-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 组件仅可用于缩放目的。您也许可以同时使用一个这样的组件react-image-gallery