如何将道具传递给带样式的组件并通过图像对象数组进行映射

import React from 'react';

const StyledComponent = ({ prop, style }) => {
  return <div style={style}>{prop}</div>;
};

export default StyledComponent;

const imageArray = [
  { prop: 'Image 1', style: { color: 'red' } },
  { prop: 'Image 2', style: { color: 'blue' } },
  { prop: 'Image 3', style: { color: 'green' } },
];

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

const App = () => {
  const imageArray = [
    { prop: 'Image 1', style: { color: 'red' } },
    { prop: 'Image 2', style: { color: 'blue' } },
    { prop: 'Image 3', style: { color: 'green' } },
  ];

  return (
    <div>
      {imageArray.map((image, index) => (
        <StyledComponent key={index} prop={image.prop} style={image.style} />
      ))}
    </div>
  );
};

export default App;