React array

来源:互联网 发布:淘宝空单号多少钱一个 编辑:程序博客网 时间:2024/06/01 23:23

JSX上的数组输出

<html>  <head>      <title>Document</title>      <script src="../react.js"></script>      <script src="../react-dom.js"></script>      <!-- //引用资源,JSX转HTML -->      <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>  </head>  <body>      <div id="reactContainer"/>      <script type="text/babel">        const arr = ['a', 'b', 'c', 'd']        const HelloComponent = React.createClass({          render: () => <div>{    //只能放回一个对象            arr.map(name => <div key={name}>hello, {name}</div>)          }</div>        })        ReactDOM.render(          <HelloComponent/>,          document.getElementById('reactContainer')        )      </script>  </body></html>

数组中的JSX

  <script type="text/babel"> //babel JSX => HTML      const arr = [        <h1 key='1'>a</h1>,        <h2 key='2'>b</h2>      ]      ReactDOM.render(        <div>{arr}</div>, //只有一个块        document.getElementById('reactContainer')      )    </script>
原创粉丝点击