Reactでコンポーネントの表示を3項演算子で実装
Reactコンポーネントで三項演算子を使用してコンポーネントを表示する例を示します。
この例では、isLoadingという状態に基づいて、ローディングスピナーを表示するか、データを表示するかを決定します。
必要なパッケージのインストール手順は特にありません。
以下は、TypeScriptを使用したNext.jsプロジェクトでの実装例です。
// components/LoadingComponent.tsx import React from 'react'; import styles from './LoadingComponent.module.scss'; interface LoadingComponentProps { isLoading: boolean; } const LoadingComponent: React.FC<LoadingComponentProps> = ({ isLoading }) => { return ( <div className={styles.container}> {isLoading ? ( <div className={styles.spinner}>読み込み中...</div> ) : ( <div className={styles.data}>データがロードされました!</div> )} </div> ); }; export default LoadingComponent;
このコンポーネントを使用するには、例えば次のように親コンポーネントからisLoadingプロパティを渡します。
// pages/index.tsx import React, { useState, useEffect } from 'react'; import LoadingComponent from '../components/LoadingComponent'; const HomePage: React.FC = () => { const [isLoading, setIsLoading] = useState(true); useEffect(() => { // Simulate data fetching setTimeout(() => { setIsLoading(false); }, 2000); }, []); return ( <div> <LoadingComponent isLoading={isLoading} /> </div> ); }; export default HomePage;
この例では、2秒後にisLoadingがfalseに設定され、データがロードされたことを表示します。
LoadingComponentは、isLoadingの値に基づいて表示内容を切り替えています。