Necesitamos tu ayuda para difundir nuestras crónicas referente a las ciencias de la computación.
Solución:
HTML admite datos-* attribute tipo para personalizado attributes. Puedes leer más sobre esto aquí.
Definición y uso Los datos-* attributes se utiliza para almacenar datos personalizados privados para la página o aplicación.
Los datos-* attributes nos da la capacidad de incrustar datos personalizados
attributes en todos los elementos HTML.Los datos almacenados (personalizados) se pueden usar en el JavaScript de la página para crear una experiencia de usuario más atractiva (sin llamadas Ajax ni consultas a la base de datos del lado del servidor).
Los datos-* attributes constará de dos partes:
- los attribute El nombre no debe contener letras mayúsculas y debe tener al menos un carácter después del prefix “datos-”
- los attribute el valor puede ser cualquiera string
Nota: Personalizado attributes con el prefijo “data-” será completamente ignorado por el agente de usuario.
En lugar de simplemente usar size="A4" puedes usar data-size="A4"
Ejemplo
// ....
Archivo de definición de tipo React (por defecto – index.d.ts al mirar con create-react-app) contienen una lista de todos los elementos HTML estándar, así como conocidos attributes.
Para permitir HTML personalizado attributes, necesita definir su escritura. Haz eso expandiendo HTMLAttributes interfaz:
declare module 'react'
interface HTMLAttributes extends AriaAttributes, DOMAttributes
// extends React's HTMLAttributes
custom?: string;
Pregunta posiblemente relacionada:
como agrego attributes a los elementos HTML existentes en TypeScript/JSX?
No totalmente relacionado, pero diga que desea aceptar más attributes en su componente personalizado, usando el operador de propagación como ...rest. Así es como lo haces:
interface Props
icon?: string;
type Button = Props & React.HTMLProps & React.HTMLAttributes;
function Button(
icon,
...rest
: Button)
return (
Sección de Reseñas y Valoraciones
Recuerda que te damos el privilegio explicar si te fue de ayuda.