首页 > 文章列表 > React 官网示例:遍历渲染中的疑问解答

React 官网示例:遍历渲染中的疑问解答

298 2024-12-25

React 官网示例:遍历渲染中的疑问解答

React 官网示例:遍历渲染

在 React 的官网示例中,你可能遇到以下问题:

问题 1:如何理解变量 {listItems}?

{listItems} 是 people 数组经过 map() 转换后得到的变量,它是一个包含 li 元素的数组。map() 遍历数组中的每个元素,并返回一个经过转换的新元素。在本例中,map() 将每个元素转换为一个 li 元素。

问题 2:为什么 <li>{person}</li> 没有 return?

jsx 在渲染时将 {person} 视为一个有效的表达式,并且自动将其转换为字符串。因此,在这种情况下,return 是可选的。此外,jsx 会自动将元素包裹在一个虚拟 DOM 元素中,因此不需要额外的大括号。

来源:1731485729