将属性带到React js中的按钮

import React from 'react';

// 定义一个按钮组件
function Button(props) {
  return (
    <button onClick={props.onClick} style={props.style}>
      {props.children}
    </button>
  );
}

// 使用按钮组件并传递属性
function App() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
    border: 'none',
    borderRadius: '5px',
  };

  return (
    <div>
      <Button onClick={handleClick} style={buttonStyle}>
        Click Me!
      </Button>
    </div>
  );
}

export default App;

import PropTypes from 'prop-types';

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

Button.propTypes = {
  onClick: PropTypes.func.isRequired,
  style: PropTypes.object,
  children: PropTypes.node.isRequired,
};

Button.defaultProps = {
  style: {},
};

export default Button;