useReducer と useRef を使用して Tailwind CSS で React でドロップダウンを作成する方法

React アプリケーションでドロップダウン メニューを作成すると、追加情報に移動してアクセスするためのコンパクトな方法が提供され、ユーザー エクスペリエンスが向上します。このガイドでは、状態管理に useReducer を使用し、ドロップダウンを閉じるための外部クリックを処理するために useRef を使用して、通知用とユーザー プロファイル設定用の 2 つのドロップダウンを実装します。洗練された外観を実現するために、Font Awesome アイコンも組み込みます。

導入

現代の Web 開発では、ユーザー インターフェイスを効率的に管理することが重要です。 React を Tailwind CSS と組み合わせると、応答性の高いコンポーネントを構築するための強力なツールキットが提供されます。 React でドロップダウン機能を処理し、各ドロップダウンを個別に開閉する機能を維持しながら、ドロップダウンの外側をクリックすると確実にドロップダウンが閉じる方法を学びます。

useReducer と useRef とは何ですか?

コードに入る前に、使用する 2 つの React フックを理解しましょう:

• useReducer: このフックは、機能コンポーネントの状態を管理するための useState の代替手段です。これは、複雑な状態ロジックと複数の状態変数を管理する場合に特に役立ちます。 useReducer フックは、リデューサー関数と初期状態を受け取り、現在の状態とその状態を更新するディスパッチ関数を返します。

• useRef: このフックは、DOM 要素を直接参照する方法を提供します。これは、再レンダリングをトリガーせずに要素にアクセスして操作する場合に便利です。この例では、 useRef を使用して、ドロップダウン メニューの外でクリックが発生したかどうかを確認します。

段階的な実装

ステップ 1: プロジェクトをセットアップする

まず、Tailwind CSS を使用して React プロジェクトがセットアップされていることを確認します。お持ちでない場合は、Create React App:
を使用して作成できます。

npx create-react-app my-dropdown-app
cd my-dropdown-app
npm install tailwindcss
npx tailwindcss init

次の行を tailwind.config.js に追加して、Tailwind を構成します。

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

次に、Tailwind ディレクティブをindex.cssに追加します:

@tailwind base;
@tailwind components;
@tailwind utilities;

ステップ 2: Font Awesome をインストールする

Font Awesome アイコンを使用するには、@fortawesome/react-fontawesome パッケージをインストールする必要があります:

npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons

ステップ 3: Navbar コンポーネントを作成する

src ディレクトリに、Navbar.tsx という名前の新しいファイルを作成します。このコンポーネントにはドロップダウンが含まれます。

Navbar コードを実装する

これは、useReducer と useRef を利用してドロップダウンの状態と外部クリックを処理する Navbar コンポーネントのコードです。

import React, { useRef, useEffect, useReducer } from "react";
import { Link } from "react-router-dom";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBell, faUser, faCaretDown } from '@fortawesome/free-solid-svg-icons';

interface IState {
  isProfileOpen: boolean;
  isNotificationOpen: boolean;
}

type Action =
  | { type: 'toggleProfile' }
  | { type: 'toggleNotification' }
  | { type: 'closeAll' };

function reducer(state: IState, action: Action): IState {
  switch (action.type) {
    case 'toggleProfile':
      return {
        isProfileOpen: !state.isProfileOpen,
        isNotificationOpen: false
      };
    case 'toggleNotification':
      return {
        isProfileOpen: false,
        isNotificationOpen: !state.isNotificationOpen
      };
    case 'closeAll':
      return {
        isProfileOpen: false,
        isNotificationOpen: false
      };
    default:
      return state;
  }
}

const Navbar: React.FC = () => {
  const [state, dispatch] = useReducer(reducer, { isProfileOpen: false, isNotificationOpen: false });
  const profileDropdownRef = useRef(null);
  const notificationDropdownRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as Node;

      if (
        (profileDropdownRef.current && !profileDropdownRef.current.contains(target)) ||
        (notificationDropdownRef.current && !notificationDropdownRef.current.contains(target))
      ) {
        dispatch({ type: 'closeAll' });
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  const toggleProfileDropdown = (event: React.MouseEvent) => {
    event.stopPropagation();
    dispatch({ type: 'toggleProfile' });
  };

  const toggleNotificationDropdown = (event: React.MouseEvent) => {
    event.stopPropagation();
    dispatch({ type: 'toggleNotification' });
  };

  const closeDropdowns = () => {
    dispatch({ type: 'closeAll' });
  };

  const notificationItems = [
    { text: "New data received", time: "2 Days Ago" },
    { text: "New update available", time: "1 Day Ago" },
    { text: "Scheduled maintenance", time: "3 Days Ago" },
  ];

  const profileItems = [
    { label: "Profile", link: "#" },
    { label: "Settings", link: "#" },
    { label: "Logout", link: "#" }
  ];

  return (
    

      
    
  );
};

export default Navbar;

ステップ 4: アプリに Navbar を統合する

App.tsx ファイルを開き、Navbar コンポーネントをインポートしてアプリケーション レイアウトに含めます。

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import Navbar from './components/Navbar';

const App: React.FC = () => {
  return (
    
      
      

        
Welcome to DC Dashboard!
        {/* Other components and content */}
      
    
  );
};

export default App;

ステップ 5: Tailwind CSS を使用してスタイルを設定する

Tailwind CSS から提供されたクラスは、すでにきちんとしたデザインを提供しているはずです。ただし、必要に応じてスタイルを自由にカスタマイズしてください。

ステップ 6: アプリケーションをテストする

次を実行してアプリケーションを起動します:

bash
npm start

アプリケーションの上部にナビゲーション バーが表示され、通知とユーザー プロファイル設定の機能ドロップダウンが表示されます。

よくある質問

1.この例では useReducer フックはどのように機能しますか?

useReducer フックを使用すると、複数のドロップダウンの状態を効率的に管理できます。現在の状態を取得するリデューサー関数と、新しい状態を返すアクションを定義します。このパターンは、ドロップダウンを切り替えたり、すべてのドロップダウンを一度に閉じるためのロジックを処理したりするのに役立ちます。

2. useRef を使用する理由

useRef を使用してドロップダウン要素を参照します。これにより、クリック イベントがこれらの要素の外側で発生したかどうかを確認できます。存在する場合は、ドロップダウンを閉じるアクションをディスパッチし、クリーンなユーザー エクスペリエンスを保証します。

3.さらにドロップダウンを追加できますか?

はい！ Reducer で状態を拡張し、同様にドロップダウンを追加することができます。各ドロップダウンに独自の ref 関数と切り替え関数があることを確認してください。

4.この実装には Tailwind CSS が必要ですか?

いいえ、Tailwind CSS は必須ではありません。任意の CSS フレームワークまたはカスタム CSS スタイルを使用してドロップダウンのスタイルを設定できますが、Tailwind を使用すると、スタイリングがより迅速かつ応答性が高くなります。

結論

このガイドでは、状態管理に useReducer を使用し、外部クリックの処理に useRef を使用して、React で機能的なドロップダウン メニューを作成する方法を学びました。このアプローチは、複雑な UI インタラクションを管理するクリーンかつ効率的な方法を提供し、全体的なユーザー エクスペリエンスを向上させます。この基盤を自由に構築して、アプリケーションのニーズに合わせてカスタマイズしてください!