Reactでコンポーネントの表示を3項演算子で実装

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の値に基づいて表示内容を切り替えています。