![](https://img-blog.csdn.net/2018100911541832?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1dG9uZ2Jhbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
<!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>