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>