我正在嘗試使用 API 獲取資料并將其回圈用于橫幅影像。
我得到了資料。它作業正常。這是獲取資料的代碼。
///Retrieving data using API
const [post, setPost] = useState(null);
useEffect(() => {
axios.get(global.url 'api/welcome').then(response => {
setPost(response.data);
});
}, []);
現在，我想在橫幅中顯示影像。在第一個回圈中，div 類需要<div className="carousel-item active">如圖所示。需要從第二個回圈中移除 active ，如下所示：<div className="carousel-item">.
////Looping for banner images
post[1].data.map((banner_image) => (
<div>
<div className="carousel-item active">
<img src="image source here" className="d-block w-100" alt="" />
</div>
</div> ))
在這種情況下如何使用if條件？我對 React Js 很陌生。
先感謝您。
uj5u.com熱心網友回復：
你可以這樣在你的 JSX 中做條件：
注意 className 的 {}。
post[1].data.map((banner_image, index) => (
<div>
<div className={"carousel-item " index === 0 ? "active" : ""}>
<img src="image source here" className="d-block w-100" alt="" />
</div>
</div> ))
uj5u.com熱心網友回復：
試試這個
////Looping for banner images
post[1].data.map((banner_image, idx) => (
<div key={idx}>
<div className={`carousel-item ${idx === 0 ? "active" : ""}`}>
<img src="image source here" className="d-block w-100" alt="" />
</div>
</div> ))
uj5u.com熱心網友回復：
您可以在 JSX 中使用模板文字。
post[1].data.map((banner_image, index) => (
<div key={`uui-${index}`}>
<div className={`carousel-item ${index === 0 ? 'active' : ''}`}>
<img src="image source here" className="d-block w-100" alt="" />
</div>
</div> ))
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/480939.html
標籤：javascript 反应