So erstellen Sie ein Dropdown-Menü in React mit Tailwind CSS mithilfe von useReducer und useRef

Das Erstellen von Dropdown-Menüs in einer React-Anwendung kann die Benutzererfahrung verbessern, indem es eine kompakte Möglichkeit zur Navigation und zum Zugriff auf zusätzliche Informationen bietet. In diesem Leitfaden implementieren wir zwei Dropdowns – eines für Benachrichtigungen und eines für Benutzerprofileinstellungen – und verwenden dabei „useReducer“ für die Statusverwaltung und „useRef“ für die Verarbeitung externer Klicks zum Schließen der Dropdowns. Wir werden auch Font Awesome-Symbole für einen eleganten Look integrieren.

Einführung

In der modernen Webentwicklung ist die effiziente Verwaltung von Benutzeroberflächen von entscheidender Bedeutung. React bietet in Kombination mit Tailwind CSS ein leistungsstarkes Toolkit zum Erstellen reaktionsfähiger Komponenten. Wir lernen, wie man mit der Dropdown-Funktionalität in React umgeht und sicherstellt, dass durch Klicken außerhalb eines Dropdowns dieses geschlossen wird, während gleichzeitig die Möglichkeit erhalten bleibt, jedes Dropdown einzeln zu öffnen oder zu schließen.

Was sind useReducer und useRef?

Bevor wir in den Code eintauchen, wollen wir uns mit den beiden React-Hooks befassen, die wir verwenden werden:

• useReducer: Dieser Hook ist eine Alternative zu useState zum Verwalten des Status in Funktionskomponenten. Es ist besonders nützlich für die Verwaltung komplexer Zustandslogik und mehrerer Zustandsvariablen. Der useReducer-Hook übernimmt eine Reduzierfunktion und einen Anfangszustand, gibt den aktuellen Zustand und eine Dispatch-Funktion zurück, um diesen Zustand zu aktualisieren.

• useRef: Dieser Hook bietet eine Möglichkeit, DOM-Elemente direkt zu referenzieren. Es ist nützlich, um auf Elemente zuzugreifen und diese zu bearbeiten, ohne erneute Renderings auszulösen. In unserem Fall verwenden wir useRef, um zu prüfen, ob ein Klick außerhalb der Dropdown-Menüs erfolgt ist.

Schrittweise Umsetzung

Schritt 1: Richten Sie das Projekt ein

Stellen Sie zunächst sicher, dass Sie ein React-Projekt mit Tailwind CSS eingerichtet haben. Wenn Sie noch keine haben, können Sie sie mit Create React App erstellen:

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

Konfigurieren Sie Tailwind, indem Sie die folgenden Zeilen zu Ihrer tailwind.config.js hinzufügen:

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

Dann fügen Sie die Tailwind-Anweisungen zu Ihrer index.css hinzu:

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

Schritt 2: Installieren Sie Font Awesome

Um Font Awesome-Symbole verwenden zu können, müssen Sie das Paket @fortawesome/react-fontawesome installieren:

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

Schritt 3: Erstellen Sie die Navbar-Komponente

Erstellen Sie in Ihrem src-Verzeichnis eine neue Datei mit dem Namen Navbar.tsx. Diese Komponente enthält die Dropdowns.

Implementieren Sie den Navbar-Code

Hier ist der Code für die Navbar-Komponente, die useReducer und useRef verwendet, um Dropdown-Status und externe Klicks zu verarbeiten.

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;

Schritt 4: Integrieren Sie die Navbar in Ihre App

Öffnen Sie Ihre App.tsx-Datei und importieren Sie die Navbar-Komponente, um sie in Ihr Anwendungslayout einzubinden.

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;

Schritt 5: Stil mit Tailwind CSS

Die bereitgestellten Klassen von Tailwind CSS sollten bereits ein ordentliches Design ergeben. Sie können die Stile jedoch nach Bedarf anpassen.

Schritt 6: Testen Sie die Anwendung

Starten Sie Ihre Anwendung, indem Sie Folgendes ausführen:

bash
npm start

Sie sollten nun oben in Ihrer Anwendung eine Navigationsleiste mit funktionalen Dropdown-Menüs für Benachrichtigungen und Benutzerprofileinstellungen sehen.

FAQ

1. Wie funktioniert der useReducer-Hook in diesem Beispiel?

Der useReducer-Hook ermöglicht es uns, den Status mehrerer Dropdowns effizient zu verwalten. Wir definieren eine Reduzierfunktion, die den aktuellen Status annimmt und eine Aktion ausführt, um den neuen Status zurückzugeben. Dieses Muster ist hilfreich, um Dropdowns umzuschalten und die Logik zum gleichzeitigen Schließen aller Dropdowns zu verwalten.

2. Warum useRef verwenden?

Wir verwenden useRef, um auf die Dropdown-Elemente zu verweisen. Dadurch können wir prüfen, ob ein Klickereignis außerhalb dieser Elemente aufgetreten ist. Wenn dies der Fall ist, lösen wir eine Aktion aus, um die Dropdown-Listen zu schließen und so ein sauberes Benutzererlebnis zu gewährleisten.

3. Kann ich weitere Dropdowns hinzufügen?

Ja! Sie können den Status im Reduzierer erweitern und auf ähnliche Weise weitere Dropdowns hinzufügen. Stellen Sie einfach sicher, dass jedes Dropdown-Menü über eine eigene Referenz- und Umschaltfunktion verfügt.

4. Ist Tailwind CSS für diese Implementierung erforderlich?

Nein, Tailwind CSS ist nicht obligatorisch. Sie können Ihre Dropdowns mit jedem CSS-Framework oder benutzerdefinierten CSS-Stilen gestalten, aber Tailwind macht das Styling schneller und reaktionsschneller.

Abschluss

In diesem Leitfaden haben Sie erfahren, wie Sie in React ein funktionales Dropdown-Menü erstellen, indem Sie useReducer für die Statusverwaltung und useRef für die Verarbeitung externer Klicks verwenden. Dieser Ansatz bietet eine saubere und effiziente Möglichkeit, komplexe UI-Interaktionen zu verwalten und so das gesamte Benutzererlebnis zu verbessern. Bauen Sie gerne auf dieser Grundlage auf und passen Sie sie an die Anforderungen Ihrer Anwendung an!