动态更改循环中元素的样式

import React, { useState } from 'react';

const App = () => {
  const [colors, setColors] = useState(['red', 'green', 'blue']);

  const handleClick = (index) => {
    const newColors = [...colors];
    newColors[index] = getRandomColor();
    setColors(newColors);
  };

  const getRandomColor = () => {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  };

  return (
    <div>
      {colors.map((color, index) => (
        <div
          key={index}
          style={{ backgroundColor: color, width: '100px', height: '100px' }}
          onClick={() => handleClick(index)}
        ></div>
      ))}
    </div>
  );
};

export default App;