Question

我正在尝试在三元表达式中添加这行JSX，以便每当我将鼠标悬停在歌曲编号列上时，都可以弹出播放图标代替该列。

您可以在代码底部看到上下文中的JSX行。在td标签内。

当前，它给我一个解析错误：未终止的正则表达式，并指向结尾的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;

Answer 1

您的三元表达式格式错误。替换

<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有一些古怪之处，所以很多人说总是在它周围放上括号。

Answer 2

}少吗？

您可以尝试以下代码。

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

让图标显示在React-三元表达式中

2 个答案: