Получение значка для отображения в React - троичное выражение - PullRequest
Новая
       33

Получение значка для отображения в React - троичное выражение

0 голосов
/ 19 ноября 2018

Я пытаюсь добавить эту строку JSX в троичное выражение, чтобы всякий раз, когда я наводил курсор на колонку с номером песни, вместо этого столбца можно было всплывать значок воспроизведения.

Вы можете увидеть строку JSX в контексте к нижней части кода. Есть внутри тд тегов.

В настоящее время он выдает ошибку синтаксического анализа: неопределенное регулярное выражение и указатель на конечный тег span.

Я искал в другом месте и не уверен, как решить эту ошибку. 

<span className="ion-md-play"> { true ? this.state.hoverOn === <col 
id="song-number-column" /> : null </span>

////////////////////////////////////////////////////////////////////

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();
  }
 }

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

  };

  hoverOff(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.hoverOn(song)}
            onMouseLeave = {() => this.hoverOff(song)}>
    <td>

    <span className="ion-md-play"> { true ? this.state.hoverOn === <col id="song-number-column" /> : null </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;

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Это меньше }?

Вы можете попробовать код ниже. 

<span className="ion-md-play"> { this.state.hoverOn ? (<col id="song-number-column" />) : null } </span>
0 голосов
/ 19 ноября 2018

Ваше троичное выражение искажено.замените 

<span className="ion-md-play"> { true ? this.state.hoverOn === <col id="song-number-column" /> : null </span>

на 

<span className="ion-md-play"> { this.state.hoverOn === true ? (<col id="song-number-column" />) : null </span>

Я также добавил круглые скобки вокруг выражения jsx.Это не всегда необходимо, но есть некоторые причуды с jsx, поэтому многие люди говорят, что всегда ставят вокруг него скобки.

...