Korvaa prop drilling React Context API:lla.
Refaktoroi prop drilling pois käyttäen React Context API:ta. Koodi: [KOODI] Propsit jotka siirtyvät usean tason läpi: [PROPSIT] Vaatimukset: - Context Provider -komponentti - Custom hook contextille - TypeScript-tyypit - Oletusarvot Säilytä sama toiminnallisuus.
Korvaa nämä hakasulkeissa olevat muuttujat omilla tiedoillasi:
[KOODI][PROPSIT]Refaktoroi prop drilling pois käyttäen React Context API:ta.
Koodi:
function App() {
const [user, setUser] = useState(null);
return <Layout user={user} setUser={setUser} />;
}
function Layout({ user, setUser }) {
return <Sidebar user={user} setUser={setUser} />;
}
function Sidebar({ user, setUser }) {
return <UserMenu user={user} setUser={setUser} />;
}
function UserMenu({ user, setUser }) {
return user ? <span>{user.name}</span> : <button onClick={() => setUser({name: 'User'})}>Login</button>;
}
Propsit: user, setUser
Vaatimukset: Context, custom hook, TypeScript.Refaktoroitu Context-pohjainen koodi.
Luo custom hook toistuvalle logiikalle, jotta vältät copy-paste-koodia komponenttien välillä. Saat siistin ja testattavan hookin jota voi käyttää koko sovelluksessa.
KeskitasoJaa suuri, monimutkainen komponentti pienempiin ja uudelleenkäytettäviin osiin. Selkeyttää koodia, helpottaa testausta ja tekee ylläpidosta huomattavasti helpompaa.
KeskitasoSiisti ja selkeytä olemassa olevaa koodia.
AloittelijaSelaa kaikkia refaktorointi prompteja tai tutustu muihin kategorioihin.