如何為數組中的每個項目呈現 JSX 組件

Question

我需要為數組中的每個項目呈現一個 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>
   );
}

這里數組中有 3 個項目，所以我想渲染 3 個不同的組件。

任何幫助將不勝感激。

Answer 1

嘗試使用地圖方法：

return (
 <div>{ array.map(item => <ListView key={item} item={item} /> }</div>
)