React 循环数组的2种方式

sunda112

于 2018-03-01 10:12:10 发布

阅读量3.7w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react

本文链接：https://blog.youkuaiyun.com/sunling112/article/details/79408330

React 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在React中利用JSX语法直接在数组中插入元素，并展示了如何渲染包含多种类型元素的数组。通过示例代码说明了JSX在React项目中的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们上边的例子是循环数组的内容到JSX中，其实在数组中可以直接使用JSX语法，看下面的例子。

1
2
3
4
5
6
let arr=[
    <h1 key="1">Hello world!</h1>,
    <h2 key="2"> React is awesome</h2>
];
ReactDOM.render(
<div>{arr}</div>, document.getElementById('reactContainer') )

JSX允许直接在模版插入JavaScript变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

总结：通过两节课的我们对JSX有了初步认识，虽然React可以不使用任何其他插件，但是JSX的好处太多，React也鼓励使用，在实际工作中也是百分百使用的，所以以后的课程中我们都会使用JSX。