反应图像库答案

【问题标题】：React-images gallery反应图像库
【发布时间】：2020-03-22 17:17:19
【问题描述】：

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

这是我目前的代码。

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

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

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

谁能帮帮我？我有点迷路了:(

提前致谢。

【问题讨论】：

我现在已经实现了模态。
这里是 react-images 的示例：您还可以在这里查看自定义道具：jossmac.github.io/react-images/#
感谢 Haseeb。我已经检查过了，但没有运气在模态上实现“currentIndex”。可以请编辑我的小提琴吗？顺便说一句，我已经达到了第 2 点，所以可以忽略这一点。
你想在modal上显示currentIndex吗？
是的，模态应该使用当前图像打开，该图像在基础图像库中处于活动状态。即，如果我在第二张图像上，然后我单击打开模态，那么模态应该从第二张图像开始。目前它总是以第一张图片打开。

标签： reactjs ecmascript-6 jsx react-image

【解决方案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;

【讨论】：