javascript - 在 React 上构建音频网站 - 解析错误

Question

目前，它在我的三元语句中给我一个解析错误，从 this.state.isHovered 到结束标记。我知道我必须将语句括在大括号中，但不确定放在哪里。

它本来是将代码直接渲染到页面上，但现在我收到一个错误，因为我认为我错误地构建了三元语句。

基本上，目标是在我将鼠标悬停在歌曲编号上时显示一个播放图标来代替歌曲编号。

每当歌曲当前正在播放时，都会显示一个暂停图标来代替歌曲编号，而每当歌曲当前暂停时，都会显示另一个播放图标来代替歌曲编号。

import React, { Component } from 'react';
import albumData from './../data/albums';

class Album extends Component {
 constructor(props) {
  super(props);

const album = albumData.find( album => {
  return album.slug === this.props.match.params.slug
});

this.state = {
  album: album,
  currentSong: album.songs[0],
  isPlaying: false
};

this.audioElement = document.createElement('audio');
this.audioElement.src = album.songs[0].audioSrc;
}

play() {
 this.audioElement.play();
 this.setState({ isPlaying: true });
}

pause() {
 this.audioElement.pause();
 this.setState({ isPlaying: false });
}

setSong(song) {
 this.audioElement.src = song.audioSrc;
 this.setState({ currentSong: song });
}

handleSongClick(song) {
 const isSameSong = this.state.currentSong === song;
  if (this.state.isPlaying && isSameSong) {
   this.pause();
 } else {
   if (!isSameSong) { this.setSong(song); }
   this.play();
 }
}

isHovered(song) {
 this.setState({isMouseEnter: song })
};


isNotHovered(song) {
 this.setState({isMouseLeave: null})
};



render() {
 return (
  <section className="album">
  <section id="album-info">
  <img id="album-cover-art" src={this.state.album.albumCover} alt= . 
{this.state.album.title}/>
  <div className="album-details">
  <h1 id="album-title">{this.state.album.title}</h1>
  <h2 className="artist">{this.state.album.artist}</h2>
  <div id="release-info">{this.state.album.releaseInfo}</div>
  </div>
  </section>
  <table id="song-list">
  <colgroup>
  <col id="song-number-column" />
  <col id="song-title-column" />
  <col id="song-duration-column" />
  </colgroup>
  <tbody>
  {this.state.album.songs.map((song, index) =>
    <tr className="song"
      key={index}
        onClick={() => this.handleSongClick(song)}
          onMouseEnter={() => this.isHovered(song)}
            onMouseLeave = {() => this.isNotHovered(song)}>
    <td>
    {(this.state.isHovered === song) ? (<span className="ion-md-play"></span>) :
     (this.state.isPlaying === true && this.state.currentSong === song) ? (<span className="ion-md-pause"></span>) :
     (this.state.isPlaying !== true && this.state.currentSong === song) ? (<span className="ion-md-play"></span>) }
    </td>
    <td key='number'   > {index + 1}  </td>
    <td key='title'    > {song.title} </td>
    <td key='duration' > {song.duration} </td>

    </tr>
  )}
  </tbody>
  </table>
  </section>
  );
 }
}

export default Album;

Answer 1

您的最后一个三元条件缺少 else 条件。使用以下任一方法:

{(this.state.isHovered === song) ? (<span className="ion-md-play"></span>) :
     (this.state.isPlaying === true && this.state.currentSong === song) ? (<span className="ion-md-pause"></span>) :
     (this.state.isPlaying !== true && this.state.currentSong === song) ? (<span className="ion-md-play"></span>) : null }

或

{(this.state.isHovered === song) ? (<span className="ion-md-play"></span>) :
     (this.state.isPlaying === true && this.state.currentSong === song) ? (<span className="ion-md-pause"></span>) :
     (this.state.isPlaying !== true && this.state.currentSong === song) && (<span className="ion-md-play"></span>) }

此外，最好将如此复杂的逻辑提取到组件上的函数中并返回合适的值。这不会通过 JS 的 eslint 或 linting 标准。