如何为数组中的每个项目渲染一个 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>
)

如何为数组中的每个项目渲染一个 JSX 组件

How to render a JSX component for each item in array

javascript

reactjs