Membina Togol Mod Gelap dalam React dengan API Konteks

Mod gelap ialah ciri yang mesti ada dalam apl web moden. Ia meningkatkan pengalaman pengguna dan boleh mengurangkan ketegangan mata. Dalam siaran ini, kami akan membincangkan cara melaksanakan Togol Mod Gelap dalam apl React menggunakan API Konteks untuk mengurus keadaan secara global.

Kami akan mencipta apl ringkas yang membolehkan pengguna bertukar-tukar antara mod gelap dan terang, dengan pilihan mereka disimpan dalam Storan setempat supaya ia berterusan walaupun selepas mereka meninggalkan atau memuat semula halaman.

Langkah 1: Sediakan Konteks

Langkah pertama ialah mencipta ThemeContext yang akan menyediakan keadaan mod gelap dan fungsi togol kepada mana-mana komponen dalam apl.

// src/context/ThemeContext.js
import React, { createContext, useState, useEffect } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [darkMode, setDarkMode] = useState(() => {
    const savedMode = localStorage.getItem('dark-mode');
    return savedMode === 'true' || false;
  });

  useEffect(() => {
    localStorage.setItem('dark-mode', darkMode);
    document.body.className = darkMode ? 'dark-mode' : '';
  }, [darkMode]);

  const toggleDarkMode = () => {
    setDarkMode((prevMode) => !prevMode);
  };

  return (
    <ThemeContext.Provider value={{ darkMode, toggleDarkMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

Di sini, kami menggunakan useState untuk memulakan tema berdasarkan localStorage. useEffect memastikan bahawa apabila tema berubah, ia mengemas kini localStorage dan menggunakan kelas yang sesuai pada elemen badan.

---

Langkah 2: Buat Komponen Togol

Di sini, kami menggunakan useContext untuk menggunakan fungsi darkModevalue dan toggleDarkMode daripada ThemeContext.

// src/components/ThemeToggle.js
import React, { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';

const ThemeToggle = () => {
  const { darkMode, toggleDarkMode } = useContext(ThemeContext);

  return (
    <button onClick={toggleDarkMode}>
      {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
    </button>
  );
};

export default ThemeToggle;

---

Langkah 3: Gunakan Gaya Mod Gelap

Untuk melihat mod gelap dalam tindakan, anda perlu menambah beberapa gaya CSS. Untuk memudahkan, kami akan menggunakan tema gelap pada elemen badan.

/* src/styles.css */
body {
  margin: 0;
  font-family: sans-serif;
  transition: background-color 0.3s ease;
}

body.dark-mode {
  background-color: #121212;
  color: white;
}

---

Langkah 4: Sediakan Komponen Apl

Di sini, kami membungkus keseluruhan apl di dalam ThemeProvider, yang membolehkan keadaan mod gelap dan fungsi togol tersedia secara global.

// src/App.js
import React from 'react';
import { ThemeProvider } from './context/ThemeContext';
import ThemeToggle from './components/ThemeToggle';
import './styles.css';

function App() {
  return (
    <ThemeProvider>
      <div className="App">
        <h1>Dark Mode Toggle with Context API</h1>
        <ThemeToggle />
      </div>
    </ThemeProvider>
  );
}

export default App;

---

Dengan menggunakan API Konteks React, kami menjadikan keadaan mod gelap mudah diakses merentas apl tanpa penggerudian prop. Menambah localStorage memastikan pilihan tema berterusan, walaupun selepas halaman dimuat semula atau dilawati semula.

Sila tweak pelaksanaan asas ini dengan menambahkan lebih banyak komponen dan gaya mengikut keperluan anda.

Jika anda ingin melihat lebih banyak hasil kerja saya, lihat portfolio vrushikvisavadiya saya

Atas ialah kandungan terperinci Membina Togol Mod Gelap dalam React dengan API Konteks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!