Блог

Главная - Вопросы по программированию - теги внутри оператора switch не работают в React / Next js

теги внутри оператора switch не работают в React / Next js

#reactjs #typescript #switch-statement

#reactjs #typescript #оператор switch

Вопрос:

Кто-нибудь знает, что я здесь делаю не так. Я понимаю, что я не собираюсь использовать теги для ссылки на внешний веб-сайт за пределами оператора return, но просто хотел получить некоторые разъяснения о том, как я должен это настроить? Я также получаю предупреждение о случае сбоя в 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

Комментарии:

1. Вам нужны break инструкции, вы получаете провал в своих case s.

2. Кроме того, я не понимаю, что вы имеете в виду для выполнения с помощью JSX в onClick обработчике.

Ответ №1:

Вы не смотрите на return a тег. Он автоматически не вызывает поведение загрузки. Что вы действительно делаете, так это превращаете изображение в ссылку, которая ведет к определенному href праву? Оберните каждый img a тегом и измените свою функцию, чтобы создать соответствующий 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>
        )
    }
}

Ответ №2:

Если вы хотите вернуть разметку, пожалуйста, попробуйте ниже, обратите внимание на скобки. В других тисках вы можете опубликовать ошибку

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