Inicio / Artículos / Propiedades de React escritas a partir de atributos hacia hijos

react typescript props frontend beginners

Propiedades de React escritas a partir de atributos hacia hijos

Transfiere datos como atributos HTML, define propiedades en TypeScript, desestructura de forma segura y mantén las propiedades como solo lectura.

1068 palabras

Propiedades de React con TypeScript (inicializador 2026)

En una serie sobre React 19.2 + TypeScript compatible con el compilador, la versión inicial de ProductCard presentaba un defecto: los campos del producto estaban dentro del componente. La reutilización exige propiedades, que son datos pasados desde los componentes padre al igual que los atributos HTML.

Pasar propiedades como atributos

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>;
}

El componente padre posee los datos; el hijo los muestra.

Tipado de propiedades

Defina una interfaz (o tipo) para el objeto de propiedades:

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

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

El compilador detecta campos faltantes y tipos incorrectos antes de que se ejecute el programa.

Destructuración para mayor claridad

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

Mantenga el tipo de las propiedades en el parámetro de la función para que la destructuración siga estando tipada.

Propiedades opcionales y valores por defecto

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>
  );
}

Marque los campos opcionales con ? y proporcione valores por defecto ya sea mediante desestructuración o a través de parámetros predeterminados.

children

El contenido entre las etiquetas llega como hijos:

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>
  );
}

Asigne a los hijos el tipo React.ReactNode a menos que necesite un contrato más específico.

Véalos en DevTools

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

Inspeccione el árbol de componentes para verificar qué props llegaron realmente; es invaluable al depurar componentes anidados.

Los props son de solo lectura

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>

Nunca modifique los props dentro del hijo. Levante el estado o pase una función de callback para establecer cambios cuando el hijo necesite solicitarlo.

Resumen

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

Los props junto con TypeScript permiten crear interfaces reutilizables con contratos en tiempo de compilación. Los siguientes pasos de la serie suelen tratar sobre estado, efectos y obtención de datos, siempre manteniendo límites tipados en cada capa.

Preferir ejemplos pequeños que los lectores puedan pegar en un entorno de pruebas sin necesidad de un monorepo.

Todos los artículos Enviar el brief