[英]How to render a JSX component for each item in array
I need to render one jsx component for each item in an array.我需要为数组中的每个项目呈现一个 jsx 组件。
import { ListView } from './components'; // Custom component
const array = ["item1","item2","item3"];
export default function App() {
return(
<div>
{/* Here i want to render a <ListView /> component for each of the items in the array. */}
</div>
);
}
Here there are 3 items in the array so i want to render 3 different components.这里数组中有 3 个项目,所以我想渲染 3 个不同的组件。
Any help will be appreciated.任何帮助将不胜感激。
Try to use map method:尝试使用地图方法:
return (
<div>{ array.map(item => <ListView key={item} item={item} /> }</div>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.