Mam zainstalowaną tę zależność:

http://jfcaiceo.github.io/react-lightbox-component/

Próbuję to zrobić w dynamiczny sposób, ale nie mogę się udać. Może robię źle.

Oto mój komponent:

import React, { Component } from 'react'
import axios from 'axios'    
import Lightbox from 'react-lightbox-component';

const URL = 'http://localhost:3001/houses';

class Casas extends Component {    
  constructor(props) {
    super(props);
    this.state = {
      index: 0,     
      currentHouse: [],     
      photos: [] 
    };       
  }

  componentDidMount() {
    axios.get(URL)
      .then(res => {
        this.setState({           
          currentHouse: res.data
        })
      })
  }

  render() {
    const { currentHouse, index } = this.state;    

    const images = currentHouse.length && currentHouse[index] && currentHouse[index].photos;

    const renderImages = images && images.map((photo, index) => {   
      return (
          {
            src: `../images/${photo}.jpg`
          }
        )
    })

        <div>
          <div className="gallery">
           <Lightbox images={renderImages} />             
        </div>    
      </div>
    )
  }

}

export default Casas

Oto db.json, którego używam do pobrania przez AXIOS. Array "zdjęcia" może być renderowane.

{
  "houses": [
    {
      "id": 1,
      "name": "some text",
      "text": "some text",
      "photos": [
        "img_1",
        "img_2",
        "img_3"
      ]
    },
    {
      "id": 2,
      "name": "some text",
      "text": "some text",
      "photos": [
        "img_1",
        "img_2",
        "img_3"
      ]
    }
]

Czy ktoś wie, jak to rozwiązać?

0
claudiopb 20 luty 2019, 12:05

2 odpowiedzi

Najlepsza odpowiedź

Wtyczka trzeci partii react-lightbox-component spodziewa się zawsze poniżej poniższego formatu

 var images = {
  [
    {
      src: 'some image url',
      title: 'image title',
      description: 'image description'
    },
    ...
  ]
} 

Więc w swoim kodzie w render()

  1. currentHouse.length to 0, więc obrazy będą 0 w tej linii var images = houses.length && houses[index] && houses[index].photos; następnie renderimages 0.

  2. react-lightbox-component odbiera 0, dlatego nie uda

Następnie twoja aplikacja rzuca błąd i zatrzymuje się.

Aby to zadziałało:

  1. Musisz sprawdzić długość currentHouse.length, a następnie render react-lightbox-component

Jak poniżej:

 {
     this.state.currentHouse.length > 0  
        ? <Lightbox images={renderImages }/>   
        : null
   } 

próbny

2
Jayavel 20 luty 2019, 09:42

W kodzie znajdują się błędy składniowe. Musisz przynieść obrazy z curenthouse.Houses i wydaje się, że pobierasz go od wrądu bezpośrednio. Poniżej kodu działa dobrze. Proszę spojrzeć:

import React, {Component} from "react";
import axios from 'axios';
import Lightbox from 'react-lightbox-component';

class Casa extends Component {
constructor(props) {
    super(props);
    this.state = {
        index: 0,
        currentHouse: [],
        photos: []
    };
}

componentDidMount() {

    axios.get('books.json')
        .then(res => {
            this.setState({
                currentHouse: res.data
            })
        })
}

render() {
    const {
        currentHouse,
        index
    } = this.state;

    const images = currentHouse.houses && currentHouse.houses.length && currentHouse.houses[index] && currentHouse.houses[index].photos;

    const renderImages = images && images.map((photo, index) => {
        return ({
            src: `../images/${photo}.jpg`
        })
    });
    return (
        <div>
            <div className = "gallery" > {images && <Lightbox images = { 
               renderImages}/> }</div>     
        </div>
        )
    }
}
export default Casa;
1
Neelam 20 luty 2019, 09:41