Klientské komponenty v frameworku NextJS
Teraz prepracujme našu serverovú
komponentu na klientskú. Na to
napíšme na začiatok súboru komponenty
direktívu 'use client':
'use client';
export default function Test() {
return <h1>hello, user!</h1>;
}
Teraz budú dostupné stavy,
vytvorené pomocou useState.
Vytvorme pre príklad stav
a vypíšme jeho obsah do výstupu:
'use client';
import { useState } from 'react';
export default function Test() {
let [name, setName] = useState('user');
return <h1>hello, {name}!</h1>;
}
Vytvorte klientskú komponentu s dvoma vstupmi a tlačidlom. Nech sa do vstupov zadávajú čísla. Po kliknutí na tlačidlo vypíšte do odseku súčet zadaných čísel.
Odstráňte direktívu 'use client'.
Presvedčte sa, že v tomto prípade NextJS
zobrazí chybu z dôvodu, že
nie je možné používať stavy
vo vnútri serverových komponent.