Asiakaskomponentit NextJS-kehyksessä
Muunnetaan nyt palvelinkomponenttimme
asiakaskomponentiksi. Tehdään tämä
kirjoittamalla komponenttitiedoston
alussa direktiivi 'use client':
'use client';
export default function Test() {
return <h1>hello, user!</h1>;
}
Nyt meille tulevat saatavilla tilat,
joita luodaan useState:n avulla.
Luodaan esimerkkinä tila
ja tulostetaan sen sisältö käyttöliittymään:
'use client';
import { useState } from 'react';
export default function Test() {
let [name, setName] = useState('user');
return <h1>hello, {name}!</h1>;
}
Tee asiakaskomponentti, jossa on kaksi syöttökenttää ja painike. Syöttökenttiin syötetään numeroita. Painiketta painettaessa tulosta kappaleeseen syötettyjen numeroiden summa.
Poista direktiivi 'use client'.
Varmista, että tässä tapauksessa NextJS
antaa virheen, koska tiloja ei voi käyttää
palvelinkomponenttien sisällä.
