スポンサーリンク

Reactページの読み込みが終わるまでの間ローディングを表示する

JavaScript
たろ
たろ

ReactでWebAPIやちょっぴし重めのページの表示中の間にローディングってどうやって表示するの?

こんな悩みにお答えします。

本記事の内容
  • Reactでローディング画面を表示する方法
  • ポイントは三項演算子を使った実装
  • 三項演算子部分ではReactの状態管理を活用

ページ読み込み中のローディング画面React の状態管理を使い実装してみました。

実装時に使ったコードと実際のローディング(スピナー)画面も閲覧できるようにしていますので、最後まで読んでくれると嬉しいです。

スポンサーリンク

環境

  • React
  • spinkit(ローディング表示するときに使うCSSのライブラリ)

React ローディング表示のサンプルコード

// loadingのStateがTrueのときに表示するコンテンツ
function Content() {
  return (
    <h1>Hello World!!</h1>
  )
}

// loadingのStateがFalseのときに表示するコンテンツ
function Spinner() {
  return (
    <div className="sk-plane sk-center"></div>
  )
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }

  componentDidMount() {
    // あえてローディング(スピナー)を表示するため5秒待機
    // 5秒後loadingのStateをTrueに変更
    setTimeout(()=>this.setState({loading: true}), 5000);
  }

  render () {
    return (
      <div>
        {this.state.loading ? (<Content/>) : (<Spinner/>) }
      </div>
    )
  }
}
ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

コードのポイントは下記の部分。

{this.state.loading ? (<Content/>) : (<Spinner/>) }

三項演算子を用い、 this.state.loadingTrueFalseかで表示するコンテンツを切り替えています。

検証

この記事を読んでここまできていただいた方はすでに「Hello World」が表示されてしまっていると思います。

お手数ですが、ページを再読み込みしていただくとローディング画面が表示され、5秒後に「Hello World」が表示されます。

Reactの勉強は下記の書籍がおすすめです↓

コメント

  1. […] Reactページの読み込みが終わるまでの間ローディングを表示する […]

タイトルとURLをコピーしました