Klientkomponenter i NextJS-ramverket
Låt oss nu göra om vår serverkomponent
till en klientkomponent. För att göra detta
skriver vi direktivet 'use client'
i början av komponentfilen:
'use client';
export default function Test() {
return <h1>hello, user!</h1>;
}
Nu kommer vi att få tillgång till state,
som skapas via useState.
Låt oss som exempel skapa ett state
och visa dess innehåll i renderingen:
'use client';
import { useState } from 'react';
export default function Test() {
let [name, setName] = useState('user');
return <h1>hello, {name}!</h1>;
}
Skapa en klientkomponent med två inmatningsfält och en knapp. Låt siffror matas in i inmatningsfälten. Vid klick på knappen, visa summan av de inmatade talen i ett stycke.
Ta bort direktivet 'use client'.
Se till att NextJS i detta fall
ger ett fel på grund av att
det inte går att använda state
inuti serverkomponenter.
