[英]react-lightbox-gallery and simple-react-lightbox are not working properly
I was trying in my react project to had an adaptive gallery that had also a lightbox when clicked on, i tried to use react-lightbox-gallery and it worked but not quite, when i inserted the src: "" manually was fine, when i tried to push inside an array of object and passed into the gallery component they didn't showed up, the only way they showed up was when i pass manually the first object and then push the others.我试图在我的反应项目中有一个自适应画廊,当点击时也有一个灯箱,我尝试使用react-lightbox-gallery并且它工作但不完全,当我插入 src:"" 手动很好,当我试图推入一个对象数组并传递到他们没有出现的画廊组件中,他们出现的唯一方法是当我手动传递第一个对象然后推送其他对象时。 In that case if i clicked on the only one rendered and then close the lightbox would render the other pushed missing images.
在这种情况下,如果我单击渲染的唯一一个,然后关闭灯箱将渲染另一个推送的丢失图像。
Then i tried to change into simple-react-lightbox and it won't even show up in the DOM, it's just an empty div.然后我尝试更改为simple-react-lightbox ,它甚至不会出现在 DOM 中,它只是一个空的 div。
UPDATE : The component won't load unless i change the viewport size.更新:除非我更改视口大小,否则不会加载组件。
https://streamable.com/asibpx https://streamable.com/asibpx
Video of the problem.问题的视频。
Here's the code:这是代码:
import React, { Component } from 'react'
import { SRLWrapper } from "simple-react-lightbox";
import axios from 'axios';
export default class Gallery extends Component {
render() {
var images = [];
axios.get("http://localhost:80/api/main.php").then(res => {
res.data.forEach(element => {
images.push({
src: "http://" + window.location.hostname + '/media/images/andes/' + element,
caption: 'Lorem ipsum dolor sit amet',
width: 'auto',
height: 'auto'
});
});
}).catch(error => console.log(error));
console.log(images);
return (
<div>
<SRLWrapper elements={images} />
</div>
);
}
}
Here's the index.js这是 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import SimpleReactLightbox from 'simple-react-lightbox';
import {
BrowserRouter as Router
} from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import './customCss/custom.css';
ReactDOM.render(
<Router>
<React.StrictMode>
<SimpleReactLightbox>
<App />
</SimpleReactLightbox>
</React.StrictMode>
</Router>,
document.getElementById('root')
);
SOLVED解决了
I needed to use setState and not directly push on a variable, for some reason they can't be read singularly and for some other reasons changing viewport would make them readable...我需要使用setState而不是直接推送变量,由于某种原因它们不能被单独读取,并且由于其他一些原因改变视口会使它们可读......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.