Lightgallery.js рендеринг с циклом в отдельной функции не работает - PullRequest
Новая
       8

Lightgallery.js рендеринг с циклом в отдельной функции не работает

0 голосов
/ 24 октября 2018

Итак, я работаю над проектом React js, в котором я выбираю объект, содержащий несколько деталей, включая имя изображения (или, скорее, локальный путь) из базы данных MySql.Я пытаюсь использовать LightGallery.js для отображения нескольких изображений объекта внутри слайдера изображений, как например, lightgallery.Теперь проблема:

Если я использую жестко закодированные теги html в методе рендеринга (теперь закомментирован), галерея работает как шарм.Однако мне нужно будет визуализировать эти изображения динамически, так как я не могу контролировать, сколько изображений будет загружено на элемент.Я пытался написать функцию returnPics (), чтобы выдавать нужные теги и их дочерние элементы (

Вот необходимый код: 

import React, { Component } from "react";
import Layout from "../components/Layout";
import axios from "axios";
import { Container, Header } from "semantic-ui-react";
import "lightgallery.js";

class item extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: "",
      title: "",
      category: "",
      description: "",
      owner: "",
      price: "",
      tags: [],
      pics: []
    };
  }

  async componentWillMount() {
    let thisObject;
    let pathname = window.location.pathname.split("/");
    let id = pathname[pathname.length - 1];

    let response = await axios.post(window.location.origin + "/item", { id });
    if (response.data.success) {
      thisObject = response.data.object;
      let picsTemp = [];

      for (let i = 0; i < response.data.pics.length; i++) {
        picsTemp.push(response.data.pics[i].name);
      }

      this.setState({
        id: response.data.id,
        title: thisObject[0].title,
        category: thisObject[0].category,
        description: thisObject[0].description,
        owner: thisObject[0].owner,
        price: thisObject[0].price,
        tags: response.data.tags,
        pics: picsTemp
      });
    }
  }

  returnPics = () => {
    let picsToReturn = [];

    for (let i = 0; i < this.state.pics.length; i++) {
      let source = "../static/" + this.state.pics[i];
      let key = "picObject" + i;
      let picKey = "pic" + i;
      let lgEvent = "&" + (i + 1);

      picsToReturn.push(
        <a key={key} href={source} lg-event-uid={lgEvent}>
          <img key={picKey} src={source} />
        </a>
      );
      console.log(picsToReturn);
    }
    return picsToReturn;
  };

  render() {
    return (
      <Layout>
        <Container textAlign="center">
          <Header size="huge">{this.state.title}</Header>

          <div id="lightgallery">
            {this.returnPics()}                               <------this doesn't

            {/* <a href="../static/Aere_adidas_f50.jpg">      <------this works
              <img src="../static/Aere_adidas_f50.jpg" />
            </a>
            <a href="../static/Aere_ps4.png">
              <img src="../static/Aere_ps4.png" />
            </a> */}


          </div>
          <script src="../node_modules/lightgallery.js/dist/js/lightgallery.min.js" />
        </Container>
        <script type="text/javascript">
          {lightGallery(document.getElementById("lightgallery"))};
        </script>
      </Layout>
    );
  }
}

export default item;

Кто-нибудь может понять, почему это может быть?

Спасибо за вашу помощь!

...