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-image-gallery

旁边使用一个这样的组件

Answer 2

我想灯箱反应将是一个完美的选择。

Answer 3

您必须使用npm提供的react灯箱。

安装命令： npm i react-image-lightbox

，然后在intialData中使用并将其设置为true，以便您的图像在点击事件时缩放。

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

3 个答案: