使图标显示在React - Ternary表达式中

Question

我正在尝试将这行JSX添加到一个三元表达式中，这样每当我将鼠标悬停在song-number-column上时，我就可以在该列的位置弹出播放图标。

您可以在代码底部看到上下文中的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>