在反應中考慮以下組件：
import React from "react";
import { Carousel } from "react-bootstrap";
function CarouselHome() {
return (
<>
<Carousel fade pause="hover" id="carousel" variant="">
<Carousel.Item>
<img
className="d-block w-100"
src="https://source.unsplash.com/1280x400/?bali"
alt="First slide"
/>
<Carousel.Caption>
<p>Bali, Indonesia</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="https://source.unsplash.com/1280x400/?maldives"
alt="Second slide"
/>
<Carousel.Caption>
<p>Maldives</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="https://source.unsplash.com/1280x400/?greece"
alt="Third slide"
/>
<Carousel.Caption>
<p>Greece</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</>
);
}
export default CarouselHome;
source.unsplash.com 回傳一個影像，但它需要一秒鐘左右，因此頁面的其余部分在此組件之前加載，我想在加載時添加一個微調器，考慮到這甚至不是獲取，我該怎么做稱呼？
uj5u.com熱心網友回復：
你可以應用這樣的邏輯
import React, {useState} from "react";
import { Carousel } from "react-bootstrap";
function CarouselHome() {
const [imageLoaded, setImageLoaded]=React.useState(false);
return (
<>
<Carousel fade pause="hover" id="carousel" variant="">
<Carousel.Item>
<img
className={`w-100 ${
imageLoaded ? 'd-block' : 'd-none'
}`}
src="https://source.unsplash.com/1280x400/?bali"
alt="First slide"
onLoad={()=> setImageLoaded(true)}}
/>
{!imageLoaded && (
<div className="smooth-preloader">
</div>
)}
<Carousel.Caption>
<p>Bali, Indonesia</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</>
);
}
export default CarouselHome;
我用名稱 imageLoaded 宣告狀態變數并在 img 的 onl oad 函式上更改此狀態，并根據狀態更改更改 className
uj5u.com熱心網友回復：
您可以通過這種結構實作這一點。創建<Image/>和<Loader/>組件。
const Image = ({item}) => {
const [imageLoaded, setImageLoaded] = useState(false);
const handleImageLoad = () => {
setImageLoaded(true);
};
return (
<div>
{!imageLoaded && <Loader />}
<img src={item.src} alt={item.alt} onLoad={handleImageLoad} />
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/410573.html
標籤：