我尝试将 carousel 部件作为组件制作以使其有条理,但是 carousel 中不存在 carousel 的图像,即使图像 src 是正确的。我在名为 Panner.js
的文件中制作了旋转木马,在名为 CarouselItemChild.js
的单独文件中制作了 Carousel Item 我通过了 src
、Carousel
、label
和 description
作为 CarouselItemChild
Panner.js
import React from 'react';
import { Carousel } from 'react-bootstrap';
import './Panner.css';
import first from '../assets/blue/20210609_172157.jpg';
import second from '../assets/gray/20210612_154438.jpg';
import third from '../assets/pink/20210511_174415.jpg';
import CarouselItemChild from './CarouselItem/CarouselItemChild';
const Panner = () => {
return (
<Carousel className="panner">
<CarouselItemChild
Carousel={Carousel}
src={first}
label={'blue silk scarf'}
description={
'description blue silk scarf description blue silk scarf description blue silk scarf'
}
/>
{/* <img src={first} alt="" srcset="" /> */}
</Carousel>
);
};
export default Panner;
CarouselItemChild
import React from 'react';
const CarouselItemChild = ({ Carousel, src, label, description }) => {
return (
<Carousel.Item interval={1000}>
<img className="d-block w-100" src={src} alt="a slider" />
<Carousel.Caption>
<h3>{label}</h3>
<p>{description}</p>
</Carousel.Caption>
</Carousel.Item>
);
};
export default CarouselItemChild;