我剛剛開始學習 React。我的經驗為零，所以放輕松。
我有 4 張影像要在我的應用程式中水平顯示。
我知道我能做到
import Image1 from './Image1.png`
import Image2 from './Image2.png`
...
然后在我的 app.js 中，我可以添加類似
<Col>
<img src ...>
</Col>
<Col>
<img src ...>
</Col>
我查看了檔案，并沒有真正找到正確的方法。避免<Col> </Col>為每個影像創建的最佳方法是什么？
希望這有意義嗎？
謝謝
uj5u.com熱心網友回復：
您可以創建新組件來包含col和img呼叫imageWrapper
function ImageWrapper({src}) {
return <Col>
<img src={src}>
</Col>
}
然后使用它
<ImageWrapper src...>
<ImageWrapper src...>
您也可以將陣列用于影像，然后map
像這樣使用
import Image1 from './Image1.png'
import Image2 from './Image2.png'
const arrayImage=[ Image1 , Image1 ]
return arrayImage.map((image)=>{
return (
<Col>
<img src={image}>
</Col>
)
});
uj5u.com熱心網友回復：
{[img1, img2....].map((image, i) => (
<Col key={i}>
<img src={image} />
</Col>
)}
這是一種簡單/正確的方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466118.html
標籤：反应