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

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

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

{true？this.state.hoverOn==：null
////////////////////////////////////////////////////////////////////
从“React”导入React，{Component}；
从“/../data/albums”导入相册数据；
类相册扩展组件{
建造师（道具）{
超级（道具）；
const album=albumData.find（album=>{
return album.slug==this.props.match.params.slug
});
此.state={
专辑：专辑，
当前歌曲：唱片集。歌曲[0]，
isPlaying:错误
};
this.audioElement=document.createElement（'audio'）；
this.audioElement.src=album.songs[0].audioSrc；
}
play（）{
这个.audioElement.play（）；
this.setState（{isPlaying:true}）；
}
暂停（）{
this.audioElement.pause（）；
this.setState（{isPlaying:false}）；
}
setSong（宋）{
this.audioElement.src=song.audioSrc；
this.setState（{currentSong:song}）；
}
handleSongClick（歌曲）{
const isSameSong=this.state.currentSong===song；
if（this.state.isPlaying&&isSameSong）{
这个。暂停（）；
}否则{
如果（！isSameSong）{this.setSong（song）；}
这个。play（）；
}
}
霍文（歌曲）{
this.setState（{ismouseinter:song}）；
};
霍弗夫（歌曲）{
this.setState（{isMouseLeave:null}）
};
render（）{
返回(
{this.state.album.title}
{this.state.album.artist}
{this.state.album.releaseInfo}
{this.state.album.songs.map（（歌曲，索引）=>
这个。handleSongClick（歌曲）}
onMouseCenter={（）=>this.hoverOn（歌曲）}
onMouseLeave={（）=>this.hoverOff（歌曲）}>
{true？this.state.hoverOn==：null
{index+1}
{song.title}
{song.duration}
)}
);
}
}
导出默认相册；

您的三元表达式格式不正确。请替换

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

{true？this.state.hoverOn==：null

与

{this.state.hoverOn==true？（）：null

---

我还在jsx表达式周围添加了括号。这并不总是必要的，但是jsx有一些怪癖，所以很多人说总是在它周围加上括号。

您的三元表达式格式不正确。替换

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

{true？this.state.hoverOn==：null

与

{this.state.hoverOn==true？（）：null

---

我还在jsx表达式周围添加了括号。这并不总是必要的，但是jsx有一些怪癖，所以很多人说总是在它周围加上括号。

它是否更少

}

您可以尝试下面的代码

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

{this.state.hoverOn？（）：null}

是否比

}

少

您可以尝试下面的代码

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

{this.state.hoverOn？（）：null}

它仍然给我相同的错误，指向相同的结尾span tagoh，oops我注意到了三元表达式，但错过了缺少的}：我想知道为什么每当我将鼠标悬停在songNumber或index上时图标不会出现？它仍然会给我相同的错误，并指向相同的结束跨度tagoh，oops我注意到了三元表达式，但错过了丢失的}：我想知道为什么每当我将鼠标悬停在songNumber或索引上时图标都不会出现？很好，这个结尾的花括号使它运行，但每当我将鼠标悬停在页面上的songNumber上时，它都不会变为图标。我在组件的状态下找不到

hoverOn

，所以我认为它总是未定义的。它不是在ter中被调用的吗没有语句？它是在上面的hoverOn函数中定义的？嗯…

hoverOn

函数定义

isMouseEnter

处于组件状态而不是

hoverOn

。您可以尝试将

hoverOn

和

hoverOff

的内容修改为

this.setState（{hoverOn:true}）；

和

this.setState({hoverOn:null}）

Nice，结尾的花括号使它运行，但每当我将鼠标悬停在页面上的songnumber上时，它都不会变为图标。我在组件的状态中找不到

hoverOn

，所以我认为它总是未定义的。它不是在三元语句中调用的吗？它是在上面的hoverOn函数中定义的吗？嗯……

hoverOn

函数定义

isMouseEnter

处于组件状态而不是

hoverOn

。您可以尝试将

hoverOn

和

hoverOff

的内容修改为

this.setState（{hoverOn:true}）；

和

this.setState（{hoverOn:null}）；