Por ejemplo, quiero comportar un botón como un botón normal y mejorar el componente.
<Button type="submit" className="btn">Click me!</Button>conduce a un elemento html:
<button type="submit" className="btn">Click me!</button>¿Hay alguna manera de escribir el componente Button de esta manera?:
const Button = ({children, ...htmlAttributesOnly}) => ( <button {...htmlAttributesOnly}>{children}</button> )La idea detrás es hacer que un componente sea lo más flexible posible dando acceso a todos los atributos de sus elementos html. ¿O tengo que repetir cada atributo de elemento html?
Estabas muy cerca de una respuesta, solo envuelve tus accesorios entre llaves:
const Button = ({ children, ...rest }) => ( <button {...rest}>{children}</button> )Puede crear un componente de botón como este.
export default function Button(props) { return <button {...props}>{props.children}</button>; }Más tarde puedes usarlo así.
<Button onClick={()=>alert("hello")} style={{padding:10,border:'none',backgroundColor:'white'}} >Click Me</Button>