
深入理解 react 官网中的遍历渲染
在 react 官网的示例中,有一个遍历数组并渲染列表的代码片段:
const people = [
'凯瑟琳·约翰逊: 数学家',
'马里奥·莫利纳: 化学家',
'穆罕默德·阿卜杜勒·萨拉姆: 物理学家',
'珀西·莱温·朱利亚: 化学家',
'苏布拉马尼扬·钱德拉塞卡: 天体物理学家',
];
export default function list() {
const listitems = people.map(person =>
- {listitems}
对于该示例中的疑惑:
问题 1:
listitems 是一个变量,但它包含一个映射后的数组。映射函数接收数组中的每个元素 person,并返回一个包含该元素的 jsx 元素
问题 2:
// JSX 语法 return
因此,该代码片段最终会生成一个
- 列表,其中包含了来自 people 数组的
- 元素,每个
- 元素都包含数组中相应元素的值。










