JSX 实现列表渲染

AC-PEACE2025-03-02 23:07

javascript 复制代码

const list = [
  { id: 1001, name: 'Vue' },
  { id: 1002, name: 'React' },
  { id: 1003, name: 'Angular' },
  { id: 1004, name: 'Node' },
]
function App() {
  return (
    <div className="App">
      this is App
    
      {/* 渲染列表 */}
      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
}

export default App;

map() 是 Js 数组的一个函数，会遍历数组中的每个元素，并对每个元素执行一次提供的函数。map循环哪个结构，就return哪个结构。

item 是 map() 方法提供的当前正在处理的数组元素。在这个例子中，item 是 list 数组中的一个对象，包含 id 和 name 属性。

箭头函数返回一个 JSX 元素 <li>。这个 <li> 元素会作为列表项展示在 <ul> 标签内。

<li>中 key={item.id} 是 react 内部用的，加上一个独一无二的key（字符串、number或id）与开发者关系不大，主要是用于提升渲染性能。