将两个React文件合并为一个

Question

我有两个返回html片段的文件。除了图像不同，它们是一样的。事实上，服务器对播放列表图像和类型图像有不同的路径。

props.items.images[0].url

和

props.items.icons[0].url

因此，我不得不将这段代码分发到两个不同的文件中。我怎样才能把它们合二为一呢?

const Playlist = props => {    
const playListClick = e => {
props.onClick(e.target.title);
}    
return (
<section id={props.selectedValue} className="column column__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="column column__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>
);

Answer 1

您可以使用条件(三元)运算符来查看图标是否存在，如果不存在则退回到使用图像。由于不了解周围的情况，进一步的援助是困难的。

<img className="img__tarck" title={item.id} src={item.icons ? item.icons[0].url : item.images[0].url}/>