reactjs - 反应图像库

Question

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

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

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

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

1. 实现模态，模态将使用基础图库中的当前选择图像打开。
2. 更改页脚总视图的活动视图内的“of”。即目前它的“1 of 4”所以我需要这个像“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;