Strona główna / Artykuły / Wpisz właściwości React od atrybutów do dziecięcych elementów

react typescript props frontend beginners

Wpisz właściwości React od atrybutów do dziecięcych elementów

Przekaż dane jak atrybuty HTML, wpisz właściwości w TypeScript, dekonstruuj bezpiecznie i utrzymaj właściwości jako tylko do odczytu.

1068 słów

Propy w React z TypeScript (starter 2026)

W serii „Restarting React” skierowanej do React 19.2 oraz TypeScript przyjaznego kompilatorowi, wczesna wersja ProductCard miała wadę: pola produktu znajdowały się wewnątrz komponentu. Ponowne użycie wymaga propów — danych przekazywanych z komponentów nadrzędnych podobnie jak atrybuty HTML.

Przekazywanie propów jak atrybutów

function ProductCard() {
  const product = { name: 'Mechanical Keyboard', price: 89000 }; // fixed
  return <h2>{product.name}</h2>;
}

// receiving side
function ProductCard(props) {
  return <h2>{props.name}</h2>;
}

Komponent nadrzędny posiada dane; komponent potomny je wyświetla.

Typowanie propów

Zdefiniuj interfejs (lub typ) dla obiektu propów:

// passing side
<ProductCard name="Mechanical Keyboard" />
<ProductCard name="Wireless Mouse" />

type ProductCardProps = {
  name: string;
  price: number;
};

Kompilator wykrywa brakujące pola i błędne typy przed uruchomieniem programu.

Destructuring dla lepszej czytelności

function ProductCard(props: ProductCardProps) {
  return (
    <div className="card">
      <h2>{props.name}</h2>
      <p>{props.price.toLocaleString()} won</p>
    </div>
  );
}

<ProductCard name="Keyboard" price={89000} />      // ✅ OK
<ProductCard name="Keyboard" />                     // 🔴 missing price — error
<ProductCard name="Keyboard" price="89000" />       // 🔴 price is a string — error

Zachowaj typ propów w parametrze funkcji, aby destructuring pozostał typowany.

Propy opcjonalne i wartości domyślne

type ProductCardProps = {
  name: string;
  price: number;
};

// drop the props. and pull values out directly
function ProductCard({ name, price }: ProductCardProps) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{price.toLocaleString()} won</p>
    </div>
  );
}

Zaznacz pola opcjonalne za pomocą ?, a wartości domyślne podaj albo poprzez dekonstrukcję, albo za pomocą parametrów domyślnych.

children

Treść pomiędzy tagami trafia jako dzieci:

type ProductCardProps = {
  name: string;
  price: number;
  discount?: number; // may or may not be present
};

function ProductCard({ name, price, discount = 0 }: ProductCardProps) {
  const finalPrice = price - discount;
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{finalPrice.toLocaleString()} won</p>
    </div>
  );
}

Zadeklaruj dzieci jako React.ReactNode, chyba że potrzebujesz bardziej specyficznego interfejsu.

Zobacz je w DevTools

// both are valid
<ProductCard name="Keyboard" price={89000} />              // discount is 0
<ProductCard name="Mouse" price={45000} discount={5000} />

Zbadaj drzewo komponentów, aby sprawdzić, które właściwości faktycznie trafiły — jest to nieocenione podczas debugowania komponentów otaczających.

Właściwości są tylko do odczytu

type CardProps = {
  children: React.ReactNode;
};

function Card({ children }: CardProps) {
  return <div className="card">{children}</div>;
}// everything between the tags goes in as children
<Card>
  <h2>Mechanical Keyboard</h2>
  <p>89,000 won</p>
</Card>

Nigdy nie modyfikuj właściwości wewnątrz komponentu dziecka. Przenieś stan lub przekaż funkcję callback do ustawiania, gdy komponent dziecka musi poprosić o zmianę.

function ProductCard({ name, price }: ProductCardProps) {
  price = price * 2; // 🔴 absolutely forbidden — trying to change props directly
  return <p>{price} won</p>;
}

Właściwości w połączeniu z TypeScript zapewniają ponowne wykorzystywalne interfejsy użytkownika z interfejsami na etapie kompilacji. Kolejne kroki w serii zazwyczaj dotyczą stanu, efektów i pobierania danych — nadal z typowanymi granicami na każdym poziomie.

Należy preferować małe przykłady, które czytelnicy mogą wkleić do środowiska testowego bez konieczności używania monorepo.

Niech lektorzy mają do dyspozycji małe przykłady, które mogą wkleić do środowiska testowego bez konieczności używania monorepo.

Wszystkie artykuły Wyślij brief