如何解决react-lightbox-gallery 和 simple-react-lightbox 无法正常工作
我在我的反应项目中尝试有一个自适应图库,点击时也有一个灯箱,我尝试使用 react-lightBox-gallery 并且它工作但不完全,当我插入时src: "" 手动很好,当我尝试将对象数组推入并传递到画廊组件时,它们没有出现,它们出现的唯一方法是当我手动传递第一个对象然后推送其他。在这种情况下,如果我点击渲染的唯一一个,然后关闭灯箱将渲染另一个推送的丢失图像。
然后我尝试更改为 simple-react-lightBox 并且它甚至不会出现在 DOM 中,它只是一个空的 div。
UPDATE:除非我更改视口大小,否则组件不会加载。
问题的视频。
代码如下:
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>
);
}
}
这是 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')
);
解决方法
已解决
我需要使用 setState 而不是直接推送一个变量,由于某些原因它们不能被单独读取,并且由于其他一些原因改变视口会使它们可读......
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。