React Image Карусель | Избранные изображения модальные

Question

Я пытаюсь создать пользовательский модал из этой реагирующей библиотеки карусели

По сути, я нахожусь в точке, где модал реализован правильно, но я не могу показатьсячтобы выяснить, как подключить featured image к модалу, чтобы он всегда был таким же , как тот, который в настоящее время также используется в карусели.

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>
  );
};

Это всеобработчики, которые приводят в действие карусель.Я изо всех сил пытаюсь подключить рекомендуемое изображение правильно (возможно, внутри 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}
        />
      </>
    );
  }
}
*******

Вы можете увидеть полную реализацию Карусели и bug в действии здесь в этой песочнице кода .Пожалуйста, не стесняйтесь раскошелиться.

Прямо сейчас мой модал показывает либо только первое изображение, либо все вместе ...

Я понимаю, почему в настоящее время я получаю только первое иливсе изображения , я просто не могу найти решение для моей проблемы.

Как сделать так, чтобы изображение на модале было таким же, как и на карусели

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>
  );
};