Szybki TS – React 3

Kolejna lekcja, poznajemy tym razem komponenty, propsy oraz default props. Zbieramy do kupy umiejętności Reacta i TSa, małymi kroczkami do celu. Zaczynajmy.

Ok, tworzymy folder components, w nim Heading.tsx:

import { ReactElement } from "react"

const Heading= () => {
    
}
export default Heading;

Czyli importy na górze, RFC, export default, aby się dało importować w App.tsx. Przykład importu:

import Heading from './components/Heading';

Ok, spoko, napiszmy sobie te propsy i użyjmy ich:

type HeadingProps = { title: string };

const Heading= ({ title } : HeadingProps): ReactElement => {
    return <h1>{title}</h1>
}

Ok, zaimportowane w App.tsx, to możemy użyć:

<Heading title={"Hello"} />

Działa? Ok, a teraz spróbujmy przekazać coś źle:

<Heading title={"Hello"} />
<Heading /> 
<Heading title={1} />
<Heading title={"Hello"} sth="blabla" />
<Heading title={"Hello"}>
   <p>Hello world</p>
</Heading>

I TS nie pozwala nam pominąć title, ani przekazać innego typu, niż string, ani też utworzyć sobie innego propsa, którego nie ma w naszym interfejsie. Nawet dzieci nie możemy przekazać, tak, jak to zdefiniowaliśmy, to mamy self-closing component, żadne dzieci tam nie mają prawa być.

Ok, pomału, ogarnijmy sobie default props. Zostawmy to:

<Heading title={"Hello"} />
<Heading /> 

Dodajmy do title w propsach znak ?:

import { ReactElement } from "react"

type HeadingProps = { title?: string };

const Heading= ({ title } : HeadingProps): ReactElement => {
    return <h1>{title}</h1>
}

//(parameter) title: string | undefined

export default Heading;

Niby fajnie, ale teraz widzimy, jaki typ mamy. Może być undefined. Ok, ale teraz wystarczy tylko podać domyślną wartość:

import { ReactElement } from "react"

type HeadingProps = { title?: string };

const Heading= ({ title = 'default title' } : HeadingProps): ReactElement => {
    return <h1>{title}</h1>
}

//(parameter) title: string

export default Heading;

I działa. Kiedyś jakieś dziwne kombinacje trzeba było odstawiać, dzisiaj tj. od Reacta 18.3 zdaje się, już można w ten sposób robić defaultowe propsy.

Więcej Reacta i TSa niedługo!