我有兩個回傳 html 片段的檔案。除了影像之外，它們是相同的。事實上，服務器對播放串列影像和流派影像有不同的路徑。
props.items.images[0].url
和
props.items.icons[0].url
因此，我不得不將此代碼分發到兩個不同的檔案中。我怎么能把它們合二為一？
const playListClick = e => {
props.onClick(e.target.title);
}
return (
<section id={props.selectedValue} className="collum collum__hidden" onClick={playListClick}>
<a className="link__decoration link__track hover__track link__one" href="#">
<div>
{props.items.map((item, idx) =>
<div className="container" key={idx 1} title={item.id} >
<div className="content__track" title={item.id}>
<img className="img__tarck" title={item.id} src={item.images[0].url}/>
<div className="name" title={item.id}>{item.name}</div>
</div>
</div>)}
</div>
</a>
</section>
);
}
const Genre = props => {
const genreClick = e => {
props.onClick(e.target.title);
}
return (
<section id={props.selectedValue} className="collum collum__hidden" onClick={genreClick}>
<a className="link__decoration link__track hover__track link__one" href="#">
<div>
{props.items.map((item, idx) =>
<div className="container" key={idx 1} title={item.id}>
<div className="content__track" title={item.id}>
<img className="img__tarck" title={item.id} src={item.icons[0].url}/>
<div className="name" title={item.id}>{item.name}</div>
</div>
</div>)}
</div>
</a>
</section>
);
uj5u.com熱心網友回復：
您可以使用條件（三元）運算子來查看圖示是否存在，如果不存在則回退到使用影像。由于不了解周圍情況，很難提供進一步的幫助。
<img className="img__tarck" title={item.id} src={item.icons ? item.icons[0].url : item.images[0].url}/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/491298.html
標籤：javascript html 反应 反应道具