コンポーネントがあり、コンポーネントが正しくマウントされるまで待つ必要があります。それまでは、読み込みアニメーションを表示したいと思います。どのように私はこれをリアクションで行うことができますか？リアクションスピナーアニメーションの読み込み/状態のないビュー
このような機能が必要な多くのステートレスコンポーネントがあるので、状態なしでこれを実行したいと思います。これを行う効率的な方法はありますか？もしそうでなければ、私はどのように州でこれを行うでしょうか？変数isLoadingを持ち、componentDidMountに変数をfalseに設定し、条件付きレンダリングをrender()に設定しますか？
この場合、非同期呼び出しが完了した時点をコンポーネントだけが知っているので、状態を使用するのが正しいです。
'react-loading'パッケージを使用することをお勧めします。
import ReactLoading from 'react-loading'
class App extends React.Component {
state = {
isLoading: true
};
componentDidMount() {
setTimeout(() => this.setState({ isLoading: false }), 2000); // do your async call
}
render() {
if(this.state.isLoading) { // if doing asyng things
return <ReactLoading type={type} color={color} height='667' width='375' />; // render the loading component
}
return (
<div>Content</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
、コンポーネントにloadingFinished={animationLibLoaded ? true : false}のようなものを小道具を渡し、そのコンポーネントのrender()機能で条件付きでそれをレンダリングし、loadingFinished ? (<AnimatedImages />) : <LoadingSpinner />)
のように適切にこのコンポーネントの場合には何を意味マウントのでしょうか？ –
これは、いくつかの画像を表示するコンポーネントです。イメージはアニメートされますが、アニメーションライブラリを読み込むには時間がかかります。問題は、そのアニメーションライブラリが読み込まれるまで、画像は既に画面に表示されていることです。これはやりたくないことです。ですから、ロード/回転のアニメーションを上に置きたいと思います。 –