React学习（三）数组变量

最新推荐文章于 2025-05-17 19:46:48 发布

原创最新推荐文章于 2025-05-17 19:46:48 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在JSX中直接使用JavaScript变量，并展示当变量为数组时如何展开数组元素来渲染多个React组件。

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

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="D:/ReactDom/build/react.min.js"></script>
    <script src="D:/ReactDom/build/react-dom.min.js"></script>
    <script src="D:/ReactDom/build/browser.min.js"></script>
  </head>
<body>
    <div id="example"></div>
    <script type="text/babel">
      var arr = [
        <h1 key="1">Hello world!</h1>,
        <h2 key="2">React is awesome</h2>,
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>