Tasarım sistemi çekirdeği

Tema ve temel bileşenleri içeren bir tasarım sistemi çekirdeği yazarsın.

Tasarım sistemi çekirdeği

İkinci adımda bir ThemeProvider yazacaksın. Bu sağlayıcı, tüm uygulamaya tema bilgisi taşır ve createContext ile paylaşılır.

Başlangıç kodu, önceki dersin Button çözümünü içerir; böylece projeyi tek dosyada büyütürsün. ThemeProvider, useState('light') ile tema tutar.

Alt bileşenler useContext ile temayı okur ve değiştirebilir.

Provider ve değer

ThemeProvider, ThemeContext.Provider döndürür. value özelliğine { theme, setTheme } verilir; böylece alt bileşenler hem okur hem değiştirir.

Bu desen, prop'ları katmanlar boyunca elden ele geçirmeden state paylaşmaya olanak tanır. Tasarım sisteminde tema, dil veya sepet durumu için kullanılır.

Provider yeniden çizilse bile değer referansı sabit kalmalıdır.

Uygulama ThemeProvider bileşenini yaz

ThemeProvider yaz. createContext ve useState içe aktar. ThemeContext = createContext(). function ThemeProvider({ children }). useState('light') ile theme ve setTheme. <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider> döndür. Dışa aktar.

Örnek çözümü göster

import { createContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
export default ThemeProvider;

Kendini test et

Boşluğu doldur: context oluştur

import { createContext, useState } from 'react';

const ThemeContext = ____();

Cevabı göster

import { createContext, useState } from 'react';

const ThemeContext = createContext();

ThemeProvider ne döndürür?
- useState
- useEffect
- ThemeContext.Provider
- Button
Cevabı göster

ThemeContext.Provider — ThemeProvider bir Provider bileşeni döndürür.
Provider kavramlarını eşleştir

createContext

Context oluşturur
Provider

Değeri paylaşır
value

Tema ve setter
useContext

Değeri okur

Sıradaki ders: Server bileşenli sayfa

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler