react-responsive-carousel 没有正确显示答案

【问题标题】：react-responsive-carousel is not displaying properlyreact-responsive-carousel 没有正确显示
【发布时间】：2021-06-07 19:29:23
【问题描述】：

我正在使用 react js 开发一个在线电子商务网站。在每个产品的详细信息页面上，我使用 react-responsive-carousel 来允许用户滑动浏览该特定产品的所有图像。我还希望下方有可供选择的缩略图。 react-responsive-carousel 是一个完美的选择，因为它易于实现，并且外观/功能几乎完全符合我的要求。最初，一切正常，但由于某种原因，轮播停止正常显示。我涉及轮播的代码和以前一样，所以我不确定是什么问题。

这就是图像现在的显示方式：

Top view of the carousel Lower view of the carousel

如您所见，图像和缩略图都堆叠在一起。下一个/上一个按钮位于错误的位置，并且每个图像都带有一个项目符号。

这是整个产品详情页面的代码：

import React, { Component } from 'react';
import {ProductConsumer} from '../context.js';
import {Link} from 'react-router-dom';
import SizeSelector from './SizeSelector.js';
import {Carousel} from 'react-responsive-carousel';

export default class Details extends Component {
render() {
    return (
        <ProductConsumer>
            {value => {
                const {id, title, img, info, price, size} = value.detailProduct;

                const images = img.map(index =>
                    <div>
                        <img className="img-fluid" key={id} src={index} alt="Product"/>
                    </div>
            );
                
                return (
                    <div className="mx-2 pb-5">
                        <div className="row">
                            <div className="col-10 mx-auto text-center my-5">
                                <h1>{title}</h1>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-10 mx-auto col-md-6 mb-3">
                                <Carousel>{images}</Carousel>
                            </div>
                            <div className="col-10 mx-auto col-md-6 mb-3">
                                <h3 className="mb-2">${price}</h3>
                                <p className="mb-5">{info}</p>
                                <SizeSelector />
                                <Link to="/products">
                                    <button className="btn btn-black mr-5">Back to products</button>
                                </Link>
                                <span className="btn btn-black" 
                                    onClick={() => {
                                        if (value.size === "")
                                        {
                                            value.openSizePrompt();
                                        }
                                        else 
                                        {
                                            value.addToCart(id, value.size);
                                            value.openModal(id, value.size);
                                        }
                                }}>
                                    Add to cart
                                </span>
                            </div>
                        </div>
                    </div>
                )
            }}
        </ProductConsumer>
    )
}
}

另外，我有一个包含产品数据的 javascript 文件。选择 storeProduct 时，产品的值将设置为 detailProduct。从那里，我可以获得有关该产品的所有数据。 “img”是包含图像数组的对象。每个产品可能有不同数量的图片（通常是 2-4 张），所以我必须使用 img.map 函数动态创建 <div> <img/> </div>。

如果有人知道如何解决此问题，我将不胜感激。我真的不想通过实施我自己的轮播的努力。我非常乐意提供可能有助于解决问题的其他信息。

【问题讨论】：

你解决了吗？

标签： javascript html reactjs

【解决方案1】：

我通过一个简单的导入解决了这个问题：

import 'react-responsive-carousel/lib/styles/carousel.min.css'

然而，在我遇到这个问题之前，如果没有这个导入，一切都会正常显示。我不确定是什么改变要求我这样做。

【讨论】：