реакция-фотогалерея не меняйте фотографии через штат - PullRequest
Новая
       7

реакция-фотогалерея не меняйте фотографии через штат

0 голосов
/ 26 ноября 2018

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

См. Демонстрацию: https://codesandbox.io/s/50wr02n8q4

GitHub выпуска: https://github.com/neptunian/react-photo-gallery/issues/118

Envs:

  • реакция-фотогалерея: 6.2.2
  • реакция: 16,6.3
  • npm: 6.4.1

См. Код ниже: 

const folderPhotos = [
  {
    title: "Gallery one",
    photos: [
      {
        src: "https://source.unsplash.com/2ShvY8Lf6l0/800x599"
      },
      {
        src: "https://source.unsplash.com/Dm-qxdynoEc/800x799"
      },
      {
        src: "https://source.unsplash.com/qDkso9nvCg0/600x799"
      }
    ]
  },
  {
    title: "Gallery two",
    photos: [
      {
        src: "https://source.unsplash.com/iecJiKe_RNg/600x799"
      },
      {
        src: "https://source.unsplash.com/epcsn8Ed8kY/600x799"
      },
      {
        src: "https://source.unsplash.com/NQSWvyVRIJk/800x599"
      }
    ]
  }
];

Объект размеров photoProps: 

const photoProps = {
    width: 1,
    height: 1
  };

Внутренний компонент здесь: 

<Gallery
        columnsLength={6}
        photosObj={folderPhotos}
        photoProps={photoProps}
        withLightbox={true}
      />

Теперь компонент Gallery: 

import _ from "lodash";
import React, { Component, Fragment } from "react";
import Gallery from "react-photo-gallery";
import Lightbox from "react-images";

export class PhotoGallery extends Component {
  constructor(props) {
    super(props);

    // Bindables
    this.showGallery = this.showGallery.bind(this);
    this.openLightbox = this.openLightbox.bind(this);
    this.closeLightbox = this.closeLightbox.bind(this);
    this.goToPrevious = this.goToPrevious.bind(this);
    this.goToNext = this.goToNext.bind(this);
  }

  state = {
    photosObj: [],
    currentImage: 0,
    lightboxIsOpen: false
  };

  async showGallery(itemObj, photoProps) {
    let photosObj = [];

    if (!_.isEmpty(itemObj)) {
      photosObj = await Object.keys(itemObj)
        .map(i => itemObj[i])
        .map(item => ({
          ...item,
          width: photoProps.width,
          height: photoProps.height
        }));

      this.setState({
        photosObj
      });

      console.log("-- props: ", this.state.photosObj);
    }
  }

  openLightbox(event, obj) {
    this.setState({
      currentImage: obj.index,
      lightboxIsOpen: true
    });
  }

  closeLightbox() {
    this.setState({
      currentImage: 0,
      lightboxIsOpen: false
    });
  }

  goToPrevious() {
    this.setState({
      currentImage: this.state.currentImage - 1
    });
  }

  goToNext() {
    this.setState({
      currentImage: this.state.currentImage + 1
    });
  }

  render() {
    const { columnsLength, photosObj, photoProps, withLightbox } = this.props;
    return (
      <div className="section-body">
        <div className="content-col-info">
          <ul className="list-mentors w-list-unstyled">
            {photosObj.map((itemObj, i) => (
              <li key={i}>
                <span
                  className="mentors-item w-inline-block"
                  onClick={() => this.showGallery(itemObj.photos, photoProps)}
                >
                  <div>{itemObj.title}</div>
                </span>
              </li>
            ))}
          </ul>
        </div>

        <div className="content-col-info">
          {!_.isEmpty(this.state.photosObj) && (
            <Gallery
              columns={columnsLength}
              photos={this.state.photosObj}
              onClick={withLightbox ? this.openLightbox : null}
            />
          )}

          {!_.isEmpty(this.state.photosObj) && withLightbox && (
            <Lightbox
              images={this.state.photosObj}
              onClose={this.closeLightbox}
              onClickPrev={this.goToPrevious}
              onClickNext={this.goToNext}
              currentImage={this.state.currentImage}
              isOpen={this.state.lightboxIsOpen}
            />
          )}
        </div>
      </div>
    );
  }
}

export default PhotoGallery;

РЕДАКТИРОВАТЬ - я обновил реквизиты Галереи

Я также исправляю реквизиты компонента Gallery этого примера. 

loadGallery(columnsLength) {
    import("./photo-gallery").then(Gallery => {
      console.log("-- load gallery: ", this.state.photosObj);

      return (
        <Gallery.default
          columnsLength={columnsLength}
          photosObj={this.state.photosObj}
          withLightbox={true}
        />
      );
    });
  }

И чтобы назвать это: 

{!_.isEmpty(this.state.photosObj) && this.loadGallery(columnsLength)}

Ссылки:

1 Ответ

0 голосов
/ 26 ноября 2018

Так как опция photos требуется в Gallery.js (Библиотека) 

Gallery.propTypes = {
  photos: _propTypes2.default.arrayOf(_Photo.photoPropType).isRequired,
  direction: _propTypes2.default.string,
  onClick: _propTypes2.default.func,
  columns: _propTypes2.default.number,
  margin: _propTypes2.default.number,
  ImageComponent: _propTypes2.default.func
};

Передайте "photos = {this.state.photosObj}" в <Gallery /> Gallery.js (ваш файл js) какследует:

Код: 

<Gallery
  columnsLength={columnsLength}
  photosObj={this.state.photosObj}
  photos={this.state.photosObj}
  withLightbox={true}
 />

Я не уверен, почему вы передаете другие варианты.

...