如何在React中循环使用不同样式的按钮onClick

import React from 'react';

const Button = ({ text, className }) => {
  return (
    <button className={className} onClick={() => console.log('按钮被点击')}>
      {text}
    </button>
  );
};

export default Button;

const styles = {
  primaryButton: {
    backgroundColor: 'blue',
    color: 'white',
  },
  secondaryButton: {
    backgroundColor: 'gray',
    color: 'black',
  },
  // 其他样式...
};

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

const App = () => {
  const styles = {
    primaryButton: {
      backgroundColor: 'blue',
      color: 'white',
    },
    secondaryButton: {
      backgroundColor: 'gray',
      color: 'black',
    },
    // 其他样式...
  };

  const buttons = [
    { text: '按钮1', style: styles.primaryButton },
    { text: '按钮2', style: styles.secondaryButton },
    // 其他按钮...
  ];

  return (
    <div>
      {buttons.map((button, index) => (
        <Button key={index} text={button.text} className={button.style} />
      ))}
    </div>
  );
};

export default App;