我使用react-image-gallery來查看頁面上的圖像。現在我需要在點擊按鈕時實現放大和縮小功能。我已經詳細閱讀了react-image-gallery的文檔,但我找不到任何有用的信息。有一個名爲renderCustomControls的道具,我用它來顯示左上角的縮放功能按鈕,如下所示:放大和縮小React.js中的圖像
但我不知道如何使這項工作。任何形式的幫助將不勝感激。以下是一些相關的代碼:
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'。 –