React 渲染列表数据

最新推荐文章于 2024-03-24 11:00:00 发布

徐同保

最新推荐文章于 2024-03-24 11:00:00 发布

阅读量1.4k

点赞数 1

分类专栏： web前端前端技术分享文章标签： React 渲染列表数据

本文链接：https://blog.csdn.net/xutongbao/article/details/82980229

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

<!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>

徐同保

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
React 渲染列表数据

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8" /&gt;&lt;title&gt;React 渲染列表数据&lt;/title&gt;&lt;script src="https://unpkg.com/react@16/umd/react.development.js
复制链接

扫一扫