React图像库依赖关系给出错误

Question

https://i.stack.imgur.com/bkGNA.png

当我在代码中触发ImageGallery组件时，会收到如图像所示的错误。我将图像项作为道具传递给ImageGallery，并在弹出模式上显示图像。但是我无法在弹出模式上显示图像，因为我得到的错误如图像中所示。

import React, {Component} from 'react'
import {Modal,Button} from '../../../components/elements'
import ImageGallery from 'react-image-gallery';
import "react-image-gallery/styles/css/image-gallery.css";
class ProfileImageGridModal extends Component {
    constructor(props) {
        super(props)
        this.state = {
            showGridModal: false,
            images : [
                {
                  original: 'https://cdn.pixabay.com/photo/2016/03/27/17/59/motorcycle-1283299_960_720.jpg',
                  thumbnail: 'https://cdn.pixabay.com/photo/2016/03/27/17/59/motorcycle-1283299_960_720.jpg',
                },
                {
                  original: 'https://cdn.pixabay.com/photo/2016/11/29/10/21/dirt-bike-1868996_960_720.jpg',
                  thumbnail: 'https://cdn.pixabay.com/photo/2016/11/29/10/21/dirt-bike-1868996_960_720.jpg',
                },
                {
                  original: 'https://cdn.pixabay.com/photo/2019/05/08/01/52/motorcycle-4187586_960_720.jpg',
                  thumbnail: 'https://cdn.pixabay.com/photo/2019/05/08/01/52/motorcycle-4187586_960_720.jpg',
                },
                {
                    original: 'https://cdn.pixabay.com/photo/2014/04/23/20/34/dirt-bike-330815_960_720.jpg',
                    thumbnail: 'https://cdn.pixabay.com/photo/2014/04/23/20/34/dirt-bike-330815_960_720.jpg',
                },
                {
                    original: 'https://cdn.pixabay.com/photo/2021/10/17/18/55/motorcycle-6719182_960_720.jpg',
                    thumbnail: 'https://cdn.pixabay.com/photo/2021/10/17/18/55/motorcycle-6719182_960_720.jpg',
                },
                {
                    original: 'https://cdn.pixabay.com/photo/2021/10/17/18/55/motorcycle-6719182_960_720.jpg',
                    thumbnail: 'https://cdn.pixabay.com/photo/2021/10/17/18/55/motorcycle-6719182_960_720.jpg',
                },
                {
                    original: 'https://cdn.pixabay.com/photo/2021/10/17/18/55/motorcycle-6719182_960_720.jpg',
                    thumbnail: 'https://cdn.pixabay.com/photo/2021/10/17/18/55/motorcycle-6719182_960_720.jpg',
                },
                {
                    original: 'https://cdn.pixabay.com/photo/2021/10/17/18/55/motorcycle-6719182_960_720.jpg',
                    thumbnail: 'https://cdn.pixabay.com/photo/2021/10/17/18/55/motorcycle-6719182_960_720.jpg',
                },
                {
                    original: 'https://cdn.pixabay.com/photo/2021/10/17/18/55/motorcycle-6719182_960_720.jpg',
                    thumbnail: 'https://cdn.pixabay.com/photo/2021/10/17/18/55/motorcycle-6719182_960_720.jpg',
                },
              ],
              renderRightNav : (onClick, disabled) => (
                <RightNav onClick={onClick} disabled={disabled} />
              )
              ,
              renderLeftNav : (onClick, disabled) => (
                <LeftNav onClick={onClick} disabled={disabled} />
              )
        }
    }
    render() {
      const { isMobile, isReviewModal } = this.props
        return (
            <div className="see-more-wrapper">
                { !isReviewModal ?
                <Button
                  className="see-more-gallery-btn"
                  onClick={() => {
                      document.body.classList.add('bike-profile-modal-open')
                    this.setState({ showGridModal: true })
                    }}
                >
                <i class="fa fa-th" aria-hidden="true"></i> See All 10 Photos
                </Button>:
                <div className="review-see-more">
                  <Button
                  className="review-see-more-gallery-btn"
                  onClick={() => {
                    document.body.classList.add('bike-profile-modal-open')
                    this.setState({ showGridModal: true })
                  }}
                >
                <i class="fa fa-th" aria-hidden="true"></i> <br/>See All <br/>10 Photos
               </Button>
                </div>
                }
               { this.state.showGridModal &&
                <div className="grid-gallery-modal-wrapper">
                    <Modal
                    className="my-modal-name"
                    showClose={true}
                    closeOnEsc={true}
                    closeOnBlur={true}
                    onClose={() => {
                      document.body.classList.remove('bike-profile-modal-open')
                      this.setState({ showGridModal: false })
                    }}
                    show={this.state.showGridModal}
                    size="fullscreen"
                    >
                        <ImageGallery
                            items={this.state.images}
                            renderRightNav = { this.state.renderRightNav}
                            renderLeftNav = { this.state.renderLeftNav}
                        />
                    </Modal>
                </div>
                }
            </div>
        );
    }
}

const RightNav = (props) => {
    const settings = {
      width: "3rem",
      height: "3rem",
      borderRadius: "50%",
      background: "#AF985F",
      fontStyle: "normal",
      fontWeight: "bold",
      fontSize: "24px",
      lineHeight: "29px",
      color:"#FFFFFF",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      cursor: "pointer"
    }
    const { onClick } = props
    return(
      <button className="bikegallery-nextarrow-wrapper image-gallery-icon image-gallery-right-nav" onClick={onClick}>
        <div classname="next-arrow">
          <i class="fas fa-arrow-right" style={settings}></i>
        </div>
      </button>
    )
  }

const LeftNav = (props) => {
  const settings = {
    width: "3rem",
    height: "3rem",
    borderRadius: "50%",
    background: "#AF985F",
    fontStyle: "normal",
    fontWeight: "bold",
    fontSize: "24px",
    lineHeight: "29px",
    color:"#FFFFFF",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    cursor: "pointer"
  }
  const { onClick } = props
  return(
    <button className="bikegallery-leftarrow-wrapper image-gallery-icon image-gallery-left-nav" onClick={onClick}>
      <div classname="next-arrow">
        <i class="fas fa-arrow-left" style={settings}></i>
      </div>
    </button>
  )
}

export default ProfileImageGridModal

ProfileImageGridModal.defaultProps = {
    showGridModal: false
}

Answer 1

你用钩子做错了。这不是反应-图像库错误。