Question

当前，这在三元语句中给了我一个解析错误，从this.state.isHovered到end标记。我知道我必须将这些语句用大括号括起来，但不确定在哪里。

它直接将代码呈现到页面上，但是现在出现错误，因为我认为三元语句的结构不正确。

基本上，目标是每当我将鼠标悬停在其上方时，便会显示播放图标来代替歌曲编号。

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

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标准。

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

1 个答案: