hoverOn 和 hoverOff 不起作用 - if 语句 - React

Question

从第 75 行开始，我试图在 if 语句中通过返回它们来添加所有 span 元素，但它给了我一个错误。

它需要一个“，”，但不确定要添加什么。将整个元素跨度包装在字符串中？

https://github.com/cjl85/bloc-jams-react/blob/master/src/components/Album.js

第 84 行是给我的错误。 return 语句应该期望该字符串带有逗号。

      {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>
    if{(this.state.hoverOn === song)} {
          {return <span className = "ion-md-play"></span>)};
    }}
    // {(this.state.hoverOn === 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 }
    </td>

Answer 1

你可以这样写

const { isHovered, isPlaying, currentSong } = this.state
return(
 /* Code Before */
 {isHovered === song ? (<span className="ion-md-play"/>) : null}
 {(isPlaying === true && currentSong === song) ? (<span className="ion-md-pause"/>) : null }
 {(isPlaying !== true && currentSong === song) ? (<span className="ion-md-play"/>) : null }
)

你能再检查一下吗？

但是我在你的代码中看到 isHovered 的状态是 func 所以你能检查一下吗