Los edificios reaccionan a los componentes funcionales sin estado con TypeScript

Un componente popular en muchos marcos CSS, como Bootstrap y Foundation, es el componente de la tarjeta. Lleva un título, una imagen y un mensaje. En este ejemplo, vamos a ver la construcción de un Componente de Tarjeta Simple usando componentes de funciones sin estado en React. Para facilitar el uso del componente en otros componentes, añadiremos definiciones TypeScript a nuestras propiedades.

Así es como podemos construir nuestro componente de la tarjeta con TypeScript in React.

123456789101112131415161718import*asReactfrom "react";interfaceCardProps{Título:cadenaImagen:cadenaCuerpo:cadena}exportconstCard:Reaccionar. FC<CardProps;= ({Título, Imagen, Cuerpo }) ={{{i}; ( <divclassName="tarjeta"<divclassName="título"{i}</div..; (;divclassName="image"<imgsrc={Imagen}/{N->>división};

tsx

A partir de aquí, puedes añadir complejidad adicional a costa de la legibilidad. Por ejemplo, podrías hacer que tu propiedad Image sea opcional.

1234567891011121314151617181920import*asReactfrom "react";interfaceCardProps{Título:cadenaImagen?:cadenaCuerpo:cadena}exportconstCard:Reaccionar. FC<CardProps;= ({Título, Imagen, Cuerpo }) => ( <divclassName="card"<divclassName="title"{Title}</div;};{Imagen&

tsx

Si se preguntan qué hace el Título, la Imagen, el Cuerpo, les recomiendo que comprueben la desestructuración. En resumen, mapea los valores del objeto CardProps que pasamos a nuevas variables que tienen el mismo nombre. Es una buena manera de evitar tener que escribir Props.Title y escribir Title en su lugar.