react页面渲染之前_react项目渲染页面
列表渲染1，将元素放到数组中直接渲染class Book extends React.Component{render(){return ({[射雕英雄传,神雕侠侣,倚天屠龙记]})}}ReactDOM.render(,document.querySelector("#wrap"))2,将数组在外部定义然后渲染// 定义一个数组var bookArr=[{siteName:"百度",siteUrl
列表渲染
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()最外层加上一个
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
0
0- 0
已为社区贡献5条内容
所有评论(0)