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

【问题标题】：If else in react.js(basic)如果在 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>} ..

标签： javascript reactjs api if-statement spotify

【解决方案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}

【讨论】：