【React】タブ表示（タブ切り替え表示）したいよ！こんな感じどう？

投稿者 投稿日:

Reactでタブによる切り替え画面を実装する方法はいくつかありますが、最も一般的な方法は、Reactの状態管理と条件レンダリングを使用することです

必要なコンポーネントは以下のイメージで作成します

  1. Appコンポーネント: 全体のコンテナ
  2. Tabsコンポーネント: タブのナビゲーション
  3. Tabコンポーネント: 各タブのコンテンツ

Appコンポーネント

import React, { useState } from 'react';
import Tabs from './Tabs';
import BasicInfo from './BasicInfo';
import DetailInfo from './DetailInfo';

const App = () => {
  const [activeTab, setActiveTab] = useState('basic');

  const handleTabClick = (tab) => {
    setActiveTab(tab);
  };

  return (
    <div>
      <Tabs activeTab={activeTab} onTabClick={handleTabClick} />
      {activeTab === 'basic' && <BasicInfo />}
      {activeTab === 'detail' && <DetailInfo />}
    </div>
  );
};

export default App;

Tabsコンポーネント

import React from 'react';

const Tabs = ({ activeTab, onTabClick }) => {
  return (
    <div>
      <button onClick={() => onTabClick('basic')} className={activeTab === 'basic' ? 'active' : ''}>
        基本情報
      </button>
      <button onClick={() => onTabClick('detail')} className={activeTab === 'detail' ? 'active' : ''}>
        詳細情報
      </button>
    </div>
  );
};

export default Tabs;

BasicInfoコンポーネント

import React from 'react';

const BasicInfo = () => {
  return (
    <div>
      <h2>基本情報</h2>
      {/* 基本情報の内容 */}
    </div>
  );
};

export default BasicInfo;

DetailInfoコンポーネント

import React from 'react';

const DetailInfo = () => {
  return (
    <div>
      <h2>詳細情報</h2>
      {/* 詳細情報の内容 */}
    </div>
  );
};

export default DetailInfo;

この基本的な構造により、ユーザーがタブをクリックすることで、それぞれのコンテンツが表示されるようになります

さらに、状態管理やスタイルの改善、ルーティングなどを追加することで、より高度なタブ切り替え機能を実装することも可能です！！

是非参考ください！

是非フォローしてください

最新の情報をお伝えします

投稿者: Mon