React 官网遍历渲染中的 {listItems} 和 {person} 如何理解？

大家好，今天本人给大家带来文章《React 官网遍历渲染中的 {listItems} 和 {person} 如何理解？》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

理解 react 官网遍历渲染示例

react 官网示例中，关于遍历渲染的部分存在一些疑问。我们逐一探讨以下问题：

问题 1：{listitems} 是个数组变量，如何理解？

{listitems} 是 javascript 中使用 map 数组方法创建的数组变量。它包含数组中每个元素的表示形式。在 react jsx 中，大括号 {} 用来表示 javascript 表达式，因此 {listitems} 实际上代表 <li>{person}</li> 表达式的集合。

问题 2：<li>{person}</li> 中为什么缺少 return 和大括号？

在 react jsx 中，<li>{person}</li> 这样的表达式是一个快捷语法，本质上它是对以下代码的语法糖：

return (
  <li>{person}</li>
);

因此，<li>{person}</li> 等价于一个返回单个 li 元素的函数。

今天关于《React 官网遍历渲染中的 {listItems} 和 {person} 如何理解？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！