react小书，怎么渲染列表（react）

在我们处理数据时，假如我们现在有一个用户列表存放到数组中

const users = [{ username: 'Jerry', age: 21, gender: 'male' },{ username: 'Tomy', age: 22, gender: 'male' },{ username: 'Lily', age: 19, gender: 'female' },{ username: 'Lucy', age: 20, gender: 'female' }
]

现在想要将数组里面的数据渲染到我们的页面上时需要怎么做呢，在之前读react的小书时表达式中插入{}里面可以存放任何数据，如果我们将jsx里面塞入一个数组，这个数组里面放了一些jsx的元素可以看到会正常显示

那么将数组对象存放到我们的{}中

const users = [{ username: 'Jerry', age: 21, gender: 'male' },{ username: 'Tomy', age: 22, gender: 'male' },{ username: 'Lily', age: 19, gender: 'female' },{ username: 'Lucy', age: 20, gender: 'female' }
]
class Index extends Component {render () {const usersElements = [] // 保存每个用户渲染以后 JSX 的数组for (let user of users) {usersElements.push( // 循环每个用户，构建 JSX，push 到数组中<div><div>姓名：{user.username}</div><div>年龄：{user.age}</div><div>性别：{user.gender}</div><hr /></div>)}return (<div>{usersElements}</div>)}
}
ReactDOM.render(<Index />,document.getElementById('root')
)

就可以进行如下的处理

通过for of语句来进行遍历，将我们的jsx进行罗列渲染

但是在一般情况下不会手动来写循环来构建jsx的结构，一般会用es6中自带的map属性，

const users = [{ username: 'Jerry', age: 21, gender: 'male' },{ username: 'Tomy', age: 22, gender: 'male' },{ username: 'Lily', age: 19, gender: 'female' },{ username: 'Lucy', age: 20, gender: 'female' }
]
class User extends Component {render () {const { user } = this.propsreturn (<div><div>姓名：{user.username}</div><div>年龄：{user.age}</div><div>性别：{user.gender}</div><hr /></div>)}
}
class Index extends Component {render () {return (<div>{users.map((user) => <User user={user} />)}</div>)}
}
ReactDOM.render(<Index />,document.getElementById('root')
)

这里通过在render中来进行map遍历调用user组件，在user组件中来进行属性的调用

在我们的列表渲染中我们需要给react一个key来理解我们的列表，需要对元素来进行唯一的标识

react小书，怎么渲染列表（react）相关推荐

React.js 小书 Lesson12 - state vs props
React.js 小书 Lesson12 - state vs props 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson12 转载请注 ...
React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）
React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一) 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson18 转载请注 ...
web前端高级React - React从入门到进阶之React条件渲染
系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染 ...
python网页前端和react有什么区别_Vue 和 React 的优点分别是什么？
谢邀.这个问题其实已经不少人邀请过,在我的 timeline 上悬浮了挺久.为什么现在突然愿意回答一下呢? 2019 年已经行至年中,Vue 即将演进到 v3.0,刚刚过去的端午节 @尤雨溪也做了 ...
React.js 小书 Lesson14 - 实战分析：评论功能（一）
React.js 小书 Lesson14 - 实战分析:评论功能(一) 本文作者:胡子大哈本文原文:http://react.huziketang.com/blog/lesson14 转载请注明出处 ...
React.js 小书 Lesson27 - 实战分析：评论功能（六）
React.js 小书 Lesson27 - 实战分析:评论功能(六) 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson27 转载请注明出 ...
React.js 小书 Lesson15 - 实战分析：评论功能（二）
作者:胡子大哈原文链接: http://huziketang.com/books/react/lesson15 转载请注明出处,保留原文链接和作者信息. 上一节我们构建了基本的代码框架,现在开始完善 ...
React.js小书总结
(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...
React.js 小书 Lesson5 - React.js 基本环境安装
React.js 小书 Lesson5 - React.js 基本环境安装本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson5 转载请注明 ...
React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈原文链接: http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋 ...

react小书，怎么渲染列表（react）

react小书，怎么渲染列表（react）相关推荐

最新文章

热门文章