如何使⽤React的列表渲染来渲染数组中的元素？

在React中，你可以使⽤JavaScript的 map() 函数来遍历数组，并为数组中的每个元素渲染⼀个React组件或元素。 map() 函数会返回⼀个新的数组，其中包含对原始数组每个元素调⽤提供的函数后的结果。 

以下是⼀个简单的例⼦，它展⽰了如何使⽤React的列表渲染来渲染⼀个数字数组中的元素：

import React from 'react';

function NumberList(props) {
const numbers = props.numbers;

const listItems = numbers.map((number) =>
// 箭头函数返回⼀个新的React元素
<li key={number.toString()}>
{number}
</li>
);

return (
<ul>{listItems}</ul>
);
}

function App() {
const numbers = [1, 2, 3, 4, 5];

return (
<div>
<h2>List of Numbers</h2>
<NumberList numbers={numbers} />
</div>
);
}
export default App;

在这个例⼦中， NumberList 组件接收⼀个 numbers 属性，该属性是⼀个数字数组。然后，它使⽤ map() 函数遍历这个数组，并为每个数字返回⼀个 <li> 元素。注意，我们为每个 <li> 元 素提供了⼀个唯⼀的 key 属性。在React中，当列表项的顺序可能会改变时，为列表项提供⼀个唯⼀的 key 属性是⾮常重要的，这有助于React识别哪些项改变了、被添加或被删除了。

最后， App 组件渲染了⼀个包含标题和 NumberList 组件的⻚⾯。 NumberList 组件接收numbers 数组作为属性，并渲染⼀个包含该数组中所有数字的列表。

程序员玫玫：堪称2024最强的前端面试场景题，已帮助512人成功拿到offer