<a> switch 语句中的标记在 React/Next js 中不起作用

Question

任何人都知道我做错了什么。我有一种感觉，我不想在退货声明之外使用标签链接到外部网站，只是想澄清一下我应该如何设置？我还收到了一个关于Switch中发生故障的警告案例。如有任何帮助，我们将不胜感激！

const StreamingButtons: React.FC<Props> = ({appleMusicUrl, spotifyUri}) => {
const handleExternalDownload = (service: StreamingType) => {
switch (service) {
case StreamingType.APPLEMUSIC: {
<a href={appleMusicUrl}></a>
}
case StreamingType.SPOTIFY : {
<a href={spotifyUri}></a>
}
default : {
console.log("do nothing")
} 
}
}
return (
<div className='streamingButtons'>
<img 
className="appleImg"
src='/images/streaming-transparent/apple-music.png'
onClick={() => handleExternalDownload(StreamingType.APPLEMUSIC)}
/>
<img
className='spotifyImg'
src='/images/streaming-transparent/spotify-green.svg'
onClick={() => handleExternalDownload(StreamingType.SPOTIFY)}
/>
</div>
)
}
export default StreamingButtons

Answer 1

您不希望return是a标记。它不会自动调用下载行为。您真正要做的是将图像作为指向特定href的链接，对吗？用a标签包裹每个img，并更改函数以创建适当的href

const StreamingButtons: React.FC<Props> = ({ appleMusicUrl, spotifyUri }) => {
const getDownloadUrl = (service: StreamingType) => {
switch (service) {
case StreamingType.APPLEMUSIC: {
return appleMusicUrl
}
case StreamingType.SPOTIFY: {
return spotifyUri
}
default: {
const NO_BEHAVIOR = '\'
return NO_BEHAVIOR
}
}
return (
<div className='streamingButtons'>
<a href={getDownloadUrl(StreamingType.APPLEMUSIC)}>
<img
className="appleImg"
src='/images/streaming-transparent/apple-music.png'
/>
</a>
<a href={getDownloadUrl(StreamingType.SPOTIFY)}>
<img
className='spotifyImg'
src='/images/streaming-transparent/spotify-green.svg'
/>
</a>
</div>
)
}
}

Answer 2

如果您想返回标记，请在下面尝试，注意括号。其他台钳你能张贴错误吗

case StreamingType.APPLEMUSIC: (
<a href={appleMusicUrl}></a>
)