javascript - react-responsive-carousel 没有正确显示

问题描述

我正在使用 react js 开发一个在线电子商务网站。在每个产品的详细信息页面上，我使用 react-responsive-carousel 来允许用户滑动浏览该特定产品的所有图像。我还希望下方有可供选择的缩略图。react-responsive-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 个），所以我必须<div> <img/> </div>使用该img.map函数动态创建。

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

标签： javascripthtmlreactjs

javascript - react-responsive-carousel 没有正确显示

问题描述

解决方案

推荐阅读