0
144
Vistas¿Cómo establecer atributos HTML con variables?
En mi HTML tengo muchos elementos repetidos con bastantes atributos cada uno y la mayoría de ellos son iguales. Está ocupando mucho espacio y podría limpiar el código si pudiera establecer los atributos como una variable y usar esa variable en todos mis elementos. Entonces, ¿hay alguna manera de hacer esto?
Por ejemplo, uno de mis elementos se ve así,
<button className='btn btn-secondary dropdown-toggle' style={{ margin: "5px" }} type='button' data-bs-toggle='dropdown' aria-expanded='false'> Delete </button>Y hay al menos otros 10 botones con exactamente el mismo conjunto de atributos y ocupa casi 100 líneas de espacio. ¿Hay alguna manera de establecer los atributos en un solo lugar y luego aplicarlos a cada elemento para ahorrar espacio?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Si está reutilizando una colección de atributos html, aquí hay dos formas de manejar esto:
- Guarde los atributos en un objeto y distribuya el objeto en cada
<button>que los use. - Cree un componente
<CustomButton>y encapsule los atributos compartidos en el componente. Debido a que cada atributo se expone como una propiedad en la interfaz del componente, cada propiedad/atributo tiene un valor predeterminado, pero se puede sobrescribir si es necesario.
// #1 const defaultButtonProps = { className: "btn btn-secondary dropdown-toggle", style: { margin: "5px" }, type: "button", "data-bs-toggle": "dropdown", "aria-expanded": "false" }; export default function App() { return ( <div className="App"> <div> {/* #1 */} <button {...defaultButtonProps}>Delete</button> <button {...defaultButtonProps}>Save</button> </div> <div> {/* #2 */} <CustomButton /> <CustomButton>Save</CustomButton> </div> </div> ); } // #2 const CustomButton = ({ className = "btn btn-secondary dropdown-toggle", style = { margin: "5px" }, type = "button", dataBsToggle = "dropdown", ariaExpanded = "false", children = "Delete" }) => { return ( <button className={className} style={style} type={type} data-bs-toggle={dataBsToggle} aria-expanded={ariaExpanded} > {children} </button> ); }; 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta