React将html属性添加到外部组件

import React from 'react';

function Button(props) {
  return (
    <button
      id={props.id}
      className={props.className}
      style={props.style}
      onClick={props.onClick}
    >
      {props.children}
    </button>
  );
}

export default Button;

import React from 'react';
import Button from './Button';

function App() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <div>
      <Button
        id="myButton"
        className="btn btn-primary"
        style={{ backgroundColor: 'blue' }}
        onClick={handleClick}
      >
        Click Me
      </Button>
    </div>
  );
}

export default App;

function Button(props) {
  console.log(props); // 调试信息
  return (
    <button
      id={props.id}
      className={props.className}
      style={props.style}
      onClick={props.onClick}
    >
      {props.children}
    </button>
  );
}