
たろ
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.loading が TrueかFalseかで表示するコンテンツを切り替えています。
検証
この記事を読んでここまできていただいた方はすでに「Hello World」が表示されてしまっていると思います。
お手数ですが、ページを再読み込みしていただくとローディング画面が表示され、5秒後に「Hello World」が表示されます。
Reactの勉強は下記の書籍がおすすめです↓
コメント
[…] Reactページの読み込みが終わるまでの間ローディングを表示する […]