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

【问题标题】：Zoom in and out on image in React.js在 React.js 中放大和缩小图像
【发布时间】：2017-02-21 12:30:02
【问题描述】：

我正在使用react-image-gallery 来查看页面上的图像。现在我需要在按钮单击时实现放大和缩小功能。我已经彻底阅读了 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>
    )
  }
}

【问题讨论】：

阅读官方文档我了解到renderCustomControls 允许您渲染自定义组件。在此自定义组件中，您应该创建一个放大缩小组件，但此 pkg 不提供该功能。你应该看看这个例子：react-medium-image-zoom 或 react-image-zoom。

标签： javascript reactjs react-redux

【解决方案1】：

看起来组件本身没有缩放功能。您可能不得不摆弄实际的图像对象本身（缩放图像并重新加载）。要么这样，要么你必须寻找另一个更合适的组件。

有许多仅用于缩放目的的 react 组件。您也许可以在react-image-gallery 旁边使用一个这样的组件@

【讨论】：

现在，我正在尝试摆弄实际的图像对象。您能否提及一些我可以在 react-image-gallery 旁边使用的组件？

【解决方案2】：

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

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

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

【讨论】：