反应图像库

Question

我正在尝试使用 React-images(https://github.com/jossmac/react-images) 构建图片库。

到目前为止，这是我的代码。

https://codesandbox.io/s/gallant-yalow-7srs6

在这里我试图实现两件事：

实施模态，模态将使用基础图库中的当前 select 图片打开。
更改 "of" 页脚总视图的内部活动视图。即目前它是“4 个中的 1 个”，所以我需要像“1 / 4”这样的“

有人能帮帮我吗？我有点迷路:(

提前致谢。

Answer 1

所以我能够达到你的要求， 工作示例：https://codesandbox.io/s/xenodochial-dawn-scjsv

这是代码：

 class gall extends React.Component {
  state = { modalIsOpen: false, currentIndex: 0 };
  toggleModal = () => {
    this.setState(state => ({ modalIsOpen: !state.modalIsOpen }));
  };
  onImageChange = (index) => {
    console.log(index)
    this.setState(state => ({ currentIndex: index }));
  };

  render() {
    const { modalIsOpen } = this.state;

    const CustomModalFooter = ({ currentIndex, views }) => {
      const activeView = currentIndex + 1;
      const totalViews = views.length;

      if (!activeView || !totalViews) return null;
      return (
        <span class="react-images__footer__count css-w6xjhe css-1ycyyax">
          {activeView} / {totalViews}
        </span>
      );
    };

    return (
      <>
        <button
          type="button"
          className="btn-fullScreen"
          onClick={this.toggleModal}
        >
          Open Modal
        </button>
        <ModalGateway>
          {modalIsOpen ? (
            <Modal onClose={this.toggleModal}>
              <Carousel
                currentIndex={this.state.currentIndex}
                components={{ FooterCount: CustomModalFooter }}
                views={images}
              />
            </Modal>
          ) : null}
        </ModalGateway>

        <Carousel
        onClick={this.onImageClick}
        trackProps={{onViewChange:(index) => this.onImageChange(index)}}
          components={{ FooterCount: CustomModalFooter }}
          views={images}
        />
      </>
    );
  }
}

export default gall;

反应图像库

React-images gallery

jsx

ecmascript-6

reactjs

react-image