在React中,循環渲染組件可以通過使用數組的map方法來實現。具體步驟如下:
示例代碼如下:
import React from 'react';
const ComponentList = () => {
const data = [1, 2, 3, 4, 5];
return (
<div>
{data.map(item => (
<Component key={item} data={item} />
))}
</div>
);
};
const Component = ({ data }) => {
return <div>{data}</div>;
};
export default ComponentList;
在上面的示例中,ComponentList組件中使用map方法遍歷data數組,并返回Component組件的實例,將其存儲在新的數組中,最后將新數組中的組件實例渲染到頁面上。