javascript - Swiper React 的样式只有在调整窗口大小后才会生效

Question

有问题。我正在开发一个使用 React、React Hooks 和使用云功能的后端 Firebase 构建的项目。

客户希望在项目中使用一些具有 Coverflow 效果的 swipers。我遇到的问题是 Swiper 与我制作的自定义钩子和用于从集合中提取数据的 firebase 函数相结合，以一些简单的样式加载，并且我传递的样式只有在我手动更改窗口大小后才会生效。我尝试使用来自某些 API 的照片直接在组件中填充 swiper，它工作正常。所以，我发现问题出在我为请求数据库所做的逻辑上。

我相信它在某种程度上与窗口样式和滑动样式的加载顺序有关。

一开始，我调用钩子来获取元素中 swiper 的数据，并且我在上面描述的行为发生了。

在我设法通过在主页中进行钩子调用并将结果传递到上下文中然后在组件中使用 Swiper 来找到解决方法之后。使用这样的解决方案样式可以正常工作。现在的问题是我必须将结果存储在本地存储中，因为如果您刷新 swiper 所在的页面，您就会丢失所有状态。此解决方案适用于树结构中的页面，但不适用于主页中的 swiper。

也许有人遇到过这种问题，请告诉我发生了什么。

标签： javascriptreactjsreact-hooksswiperswiperjs