概述
列表渲染
1，将元素放到数组中直接渲染
class Book extends React.Component{
render(){
return (
{[
射雕英雄传
,神雕侠侣
,倚天屠龙记
]}
)
}
}
ReactDOM.render(
,
document.querySelector("#wrap")
)
2,将数组在外部定义然后渲染
// 定义一个数组
var bookArr=[
{
siteName:"百度",
siteUrl:"http://www.baidu.com"
},
{
siteName:"阿里巴巴",
siteUrl:"http://www.alibaba.com"
},
{
siteName:"腾讯",
siteUrl:"http://www.qq.com"
}
]
class Book extends React.Component{
render(){
// 定义数组，将元素放到该数组中
var siteElements=[];
bookArr.forEach((item)=>{
siteElements.push(
网站：{item.siteName}
网站：{item.siteUrl}
)
})
return (
{siteElements}
)
}
}
ReactDOM.render(
,
document.querySelector("#wrap")
)
3,使用map对数据进行渲染
// 定义一个数组
var bookArr=[
{
siteName:"百度",
siteUrl:"http://www.baidu.com"
},
{
siteName:"阿里巴巴",
siteUrl:"http://www.alibaba.com"
},
{
siteName:"腾讯",
siteUrl:"http://www.qq.com"
}
]
class Book extends React.Component{
render(){
return (
{
bookArr.map((item)=>{
return(
网站：{item.siteName}
网站：{item.siteUrl}
)
})
}
)
}
}
ReactDOM.render(
,
document.querySelector("#wrap")
)
image.png
报错啦，怎么办？对于用表达式套数组罗列到页面上的元素，都要为每个元素加上 key 属性，这个 key 必须是每个元素唯一的标识。key可以在DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。所以需要给数组每一个元素增加一个唯一的标识。
一般可以将后台返回的ID作为key值，因为后台返回的ID都是唯一的。
所以需要将代码进行如下的调整，为其添加一个key。
// 定义一个数组
var bookArr=[
{
siteName:"百度",
siteUrl:"http://www.baidu.com"
},
{
siteName:"阿里巴巴",
siteUrl:"http://www.alibaba.com"
},
{
siteName:"腾讯",
siteUrl:"http://www.qq.com"
}
]
class Book extends React.Component{
render(){
return (
{
bookArr.map((item,index)=>{
return(
网站：{item.siteName}
网站：{item.siteUrl}
)
})
}
)
}
}
ReactDOM.render(
,
document.querySelector("#wrap")
)
完美解决了
react组件
class Homebutton extends Component {
render() {
return (
评论
todolist
);
}
}
image.png
页面报错了
class Homebutton extends Component {
render() {
return (
评论
todolist
);
}
}
在return()最外层加上一个
最后
以上就是欢呼烧鹅为你收集整理的react页面渲染之前_react项目渲染页面的全部内容，希望文章能够帮你解决react页面渲染之前_react项目渲染页面所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复