<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 渲染列表数据</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const users = [
{ username: 'xu', age: 21, gender: 'male' },
{ username: 'Tongbao', age: 22, gender: 'male' },
{ username: 'Lily', age: 19, gender: 'female' },
{ username: 'Lucy', age: 20, gender: 'female' }
]
class User extends React.Component {
render () {
const { user } = this.props
return (
<div>
<div>姓名：{user.username}</div>
<div>年龄：{user.age}</div>
<div>性别：{user.gender}</div>
<hr />
</div>
)
}
}
class Index extends React.Component {
render () {
return (
<div>
{users.map((user, i) => <User key={i} user={user} />)}
</div>
)
}
}
ReactDOM.render(
<Index />,
document.getElementById('root')
);
</script>
</body>
</html>