如果在 react.js(basic) 中其他

Posted 2023-04-15

【中文标题】如果在 react.js(basic) 中其他

【英文标题】：If else in react.js(basic)

【发布时间】：2020-06-20 01:06:16

【问题描述】：

我第一次使用 spotifys api 键在 react.js 上构建一个简单的单页应用程序。当用户播放歌曲时，我设法在页面上获取歌曲信息。如何在其中添加 else 语句，以便在没有播放任何内容时出现“未检测到播放”之类的内容？

 (() => 
          if (this.state.nowPlaying.id) 

            return (
              <div>
                <div> Now Playing:  this.state.nowPlaying.name </div>
                <div> By:  this.state.nowPlaying.artist </div>
                <div> Id:  this.state.nowPlaying.id </div>
                <div> Progress:  this.state.nowPlaying.progress </div>
                <div>
                  <img src= this.state.nowPlaying.image style= width: 100/>
                </div>
                <AudioFeatures
                 id=this.state.nowPlaying.id
                 ref=this.audioFeatures
                 oAuth=this.state.oAuth
                />
              </div>
            );
           
        

        )()
      

谢谢。

【问题讨论】：

尝试使用三元运算符，如this.state.nowPlaying.id ? return (<div> Your existing if statement logic </div>) : <div > No Playback deteced </div> ..

【参考方案1】：

This page 在 React 文档中讨论了条件渲染的各种选项。

在可能的情况下，我更喜欢在我要嵌入它的 JSX 表达式之前执行条件部分，但如果您希望它嵌入到该表达式中，您可以使用条件运算符（在该页面上介绍 here）而不是创建和运行临时箭头函数：

 this.state.nowPlaying && this.state.nowPlaying.id
  ?      <div>
          <div> Now Playing:  this.state.nowPlaying.name </div>
          <div> By:  this.state.nowPlaying.artist </div>
          <div> Id:  this.state.nowPlaying.id </div>
          <div> Progress:  this.state.nowPlaying.progress </div>
          <div>
            <img src= this.state.nowPlaying.image style= width: 100/>
          </div>
          <AudioFeatures
           id=this.state.nowPlaying.id
           ref=this.audioFeatures
           oAuth=this.state.oAuth
          />
        </div>
  :     <div>No Playback detected</div>

但同样，为了简化事情，我会在 JSX 表达式之前这样做：

let nowPlaying;
if (this.state.nowPlaying && this.state.nowPlaying.id) 
    newPlaying = <div>
     <div> Now Playing:  this.state.nowPlaying.name </div>
     <div> By:  this.state.nowPlaying.artist </div>
     <div> Id:  this.state.nowPlaying.id </div>
     <div> Progress:  this.state.nowPlaying.progress </div>
     <div>
       <img src= this.state.nowPlaying.image style= width: 100/>
     </div>
     <AudioFeatures
      id=this.state.nowPlaying.id
      ref=this.audioFeatures
      oAuth=this.state.oAuth
     />
    </div>;
 else 
    nowPlaying = <div>No Playback detected</div>;

然后在你的 JSX 表达式中：

nowPlaying