如何在react中使用for循环呈现组件

import React from 'react';

const data = [1, 2, 3, 4, 5];

const ComponentWithLoop = () => {
  return (
    <div>
      {data.map((item, index) => (
        <CustomComponent key={index} prop={item} />
      ))}
    </div>
  );
};

const CustomComponent = (props) => {
  return <div>{props.prop}</div>;
};

export default ComponentWithLoop;

import React from 'react';

const ComponentWithLoop = () => {
  const components = [];
  const count = 5;

  for (let i = 1; i <= count; i++) {
    components.push(<CustomComponent key={i} prop={i} />);
  }

  return <div>{components}</div>;
};

const CustomComponent = (props) => {
  return <div>{props.prop}</div>;
};

export default ComponentWithLoop;