React：将 html 属性作为 props 传递的最佳方式

Question

For instance, I want to behave a Button as a normal button and enhance the component.

<Button type="submit" className="btn">Click me!</Button>

leads to an html element:

<button type="submit" className="btn">Click me!</button>

Is there a way to write the Button component like this?:

const Button = ({children, ...htmlAttributesOnly}) => (
    <button {...htmlAttributesOnly}>{children}</button>
)

The idea behind is to make a component as flexible as possible by giving access to all of its html elements' attributes. Or do I have to repeat every html element attribute?

Answer 1

You can create a Button component like this.

export default function Button(props) {
  return <button {...props}>{props.children}</button>;
}

Later you can use it like this.

  <Button onClick={()=>alert("hello")} style={{padding:10,border:'none',backgroundColor:'white'}} >Click Me</Button>

Answer 2

You were really close to an answer, just wrap your props in curly braces:

class Button = ({ children, ...rest }) => (
    <button {...rest}>{children}</button>
)