React 图像轮播 |特色图像模式

Question

我正在尝试根据这个反应构建一个自定义模式 carousel library

基本上，我正处于正确实现模态的地步，但我似乎不知道如何将模态上的 featured image 连接到始终像 same目前也出现在轮播中的那个。

const Modal = ({ modal, items, handleModalFalse, currentIndex, featured }) => {
  return (
    <div className={modal ? "modal" : "hide"} onClick={handleModalFalse}>
      {/* this only features the first image */}
      {/* <img src={featured} /> */}
      {/* shows every image on modal*/}
      {items.map((item, i) => (
        <div key={i} className="wrapper">
          <img src={item} />
        </div>
      ))}
    </div>
  );
};

这些都是为 Carousel 提供动力的处理程序。 我正在努力正确连接特色图片（可能在componentDidMount() 内？）

class Gallery2 extends React.Component {
  state = {
    currentIndex: 0,
    items: [
      "https://homepages.cae.wisc.edu/~ece533/images/airplane.png",
      "https://homepages.cae.wisc.edu/~ece533/images/baboon.png",
      "https://homepages.cae.wisc.edu/~ece533/images/cat.png",
      "https://homepages.cae.wisc.edu/~ece533/images/boat.png"
    ],
    modal: false,
    featured: undefined
  };

  // what should go here instead??
  componentDidMount() {
    this.setState({ featured: this.state.items[0] });
  }

  slideTo = i => console.log("clicked") || this.setState({ currentIndex: i });

  onSlideChanged = e => this.setState({ currentIndex: e.item });

  slideNext = () =>
    this.setState({ currentIndex: this.state.currentIndex + 1 });

  slidePrev = () =>
    this.setState({ currentIndex: this.state.currentIndex - 1 });

  handleEnlargeClick = () => {
    this.setState({ modal: true });
  };

  handleModalFalse = () => {
    this.setState({ modal: false });
  };

render() {
    return (
      <>
        <h3>React Alice Carousel</h3>
        {/* MODAL */}
        <Modal
          modal={this.state.modal}
          items={this.state.items}
          handleModalFalse={this.handleModalFalse}
          currentIndex={this.state.currentIndex}
          featured={this.state.featured}
        />
        <RenderGallery
          items={this.state.items}
          responsive={this.responsive}
          onSlideChanged={this.onSlideChanged}
          currentIndex={this.state.currentIndex}
        />
        <button onClick={() => this.handleEnlargeClick()}>
          click to enlarge
        </button>
        <RenderThumbs
          items={this.state.items}
          slideNext={this.slideNext}
          slidePrev={this.slidePrev}
          slideTo={this.slideTo}
          responsive={this.responsive}
        />
      </>
    );
  }
}
*******

您可以在此code sandbox 上查看完整的轮播实现和bug 的实际操作。请随意分叉。

现在我的 Modal 要么只显示第一张图片，要么全部显示...

我明白为什么我目前只能获得第一张或全部图片，但我无法为我的问题找到解决方案。

如何使 Modal 上的特色图片与轮播中当前的图片相同？

Answer 1

您的代码中的问题是您的模态框正在循环所有项，并在您单击“放大”按钮时显示它们。要解决此问题，您只需将selectedIndex 与您的items 变量一起使用即可获取当前选定的item。

沙盒示例：https://codesandbox.io/s/21p19wmpyy

模式代码：

const Modal = ({ modal, items, handleModalFalse, currentIndex, featured }) => {
  return (
    <div className={modal ? "modal" : "hide"} onClick={handleModalFalse}>
      {/* this only features the first image */}
      {/* <img src={featured} /> */}
      {/* shows every image on modal*/}
      <div className="wrapper">
        <img src={items[currentIndex]} />
      </div>
    </div>
  );
};