Если еще в реакции. js (Basi c) - PullRequest
Новая
       12

Если еще в реакции. js (Basi c)

0 голосов
/ 07 марта 2020

Я создаю простое одностраничное приложение для реакции. js впервые с использованием ключей sptifys api. Мне удалось получить информацию о песне на странице, когда пользователь играет песню. Как я могу добавить к этому еще оператор 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>
            );
          } 
        }

        })()
      }

Спасибо.

1 Ответ

2 голосов
/ 07 марта 2020

Эта страница в документации React рассказывает о различных вариантах условного рендеринга.

Где возможно, я предпочитаю выполнять условную часть перед выражением JSX, в которое я собираюсь встроить ее , но если вы хотите, чтобы он был встроен в это выражение, вы можете использовать условный оператор (описанный на этой странице здесь ) вместо создания и запуска функции временной стрелки: 

{ 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}
...