React Props Masterclass

Otestujte své znalosti o props v Reactu. Props jsou životodárnou silou React komponent, přesto syntaxe a kompozice často matou vývojáře.

Otázka 1: Struktura props objektu

Vzhledem k elementu níže, jak vypadá props objekt uvnitř komponenty Navbar?

jsx

<Navbar title="Dashboard" isSticky />

Vyberte správnou odpověď:

A) { title: "Dashboard", isSticky: "isSticky" }

B) { title: "Dashboard", isSticky: true }

C) { title: "Dashboard", isSticky: undefined }

D) ["Dashboard", true]

Otázka 2: Co je technicky špatně?

Co je technicky špatně s tímto kódem?

jsx

<Modal
  isOpen={true}
  onClose={() => setIsOpen(false)}
  overlay={<div className="backdrop" />}
  config={{
    animation: "fade-in",
    duration: 300
  }}
/>

Vyberte správnou odpověď:

A) Nic

B) overlay nemůže být JSX element

C) config má příliš mnoho složených závorek

D) isOpen musí být řetězec

Otázka 3: Hodnota required prop

Uvnitř komponenty FormInput, čemu se rovná props.required?

jsx

<FormInput required />

Vyberte správnou odpověď:

A) null

B) "required"

C) undefined

D) true

Otázka 4: Co způsobí chybu?

Co způsobí chybu v tomto kódu?

jsx

<Card
  title={`Project: ${id}`}
  actions={() => <button>Edit</button>}
  style={
    backgroundColor: "white",
    borderRadius: "8px",
    padding: "20px"
  }
/>

Vyberte správnou odpověď:

A) Nic

B) actions nemůže být funkce

C) style chybí složené závorky

D) title používá neplatnou syntaxi

Otázka 5: Datový typ children

V definici komponenty níže, jaký datový typ je children?

jsx

const Grid = ({ children }) => {
  return (
    <div className="grid-container">
      {children}
    </div>
  )
}

Vyberte správnou odpověď:

A) Pole

B) React Element (Objekt)

C) Ještě nevíme

D) undefined

Otázka 6: Children jako wrapper

Pravda nebo Nepravda: Komponenta s children prop v podstatě funguje jako "rámec" nebo "wrapper", který ponechává místo pro rodičovskou komponentu, aby vyplnila obsah.

Pravda nebo Nepravda?

A) Pravda

B) Nepravda