React并没有Vue的v-for这种列表渲染方式
使用for进行列表渲染
import React from 'react'
import ReactDOM from 'react-dom'
// 列表渲染
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {
list: [
{
title: '第一个标题',
content: '第一个内容'
},
{
title: '第二个标题',
content: '第二个内容'
},
{
title: '第三个标题',
content: '第三个内容'
}
]
}
}
// 渲染函数
render () {
let listArr = []
// 通过for循环构建列表
for (let i = 0; i < this.state.list.length; i++) {
let item = (
<li>
<h3>{this.state.list[i].title}</h3>
<p>{this.state.list[i].content}</p>
</li>
)
listArr.push(item)
}
return (
<div>
<ul>
{listArr}
<li>
<h3>这是标题</h3>
<p>这是内容</p>
</li>
</ul>
</div>
)
}
}
ReactDOM.render(
<Test />,
document.getElementById('root')
)
但是这时候需要注意的是,控制台输出一个警告,告诉我们,需要有一个唯一的key
这时候需要加上key,因为需要时唯一key,所以这里我使用的是for循环中的i
import React from 'react'
import ReactDOM from 'react-dom'
// 列表渲染
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {
list: [
{
title: '第一个标题',
content: '第一个内容'
},
{
title: '第二个标题',
content: '第二个内容'
},
{
title: '第三个标题',
content: '第三个内容'
}
]
}
}
// 渲染函数
render () {
let listArr = []
// 通过for循环构建列表
for (let i = 0; i < this.state.list.length; i++) {
let item = (
<li key={i}>
<h3>{this.state.list[i].title}</h3>
<p>{this.state.list[i].content}</p>
</li>
)
listArr.push(item)
}
return (
<div>
<ul>
{listArr}
<li>
<h3>这是标题</h3>
<p>这是内容</p>
</li>
</ul>
</div>
)
}
}
ReactDOM.render(
<Test />,
document.getElementById('root')
)
使用map进行列表渲染
需要注意唯一key的问题,这里我是用的是index作为唯一key
import React from 'react'
import ReactDOM from 'react-dom'
// 列表渲染
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {
list: [
{
title: '第一个标题',
content: '第一个内容'
},
{
title: '第二个标题',
content: '第二个内容'
},
{
title: '第三个标题',
content: '第三个内容'
}
]
}
}
// 渲染函数
render () {
let listArr = []
// 使用map进行渲染
listArr = this.state.list.map((item, index) => {
return (
<li key={index}>
<h3>{index}--{item.title}</h3>
<p>{index}--{item.content}</p>
</li>
)
})
return (
<div>
<ul>
{listArr}
<li>
<h3>这是标题</h3>
<p>这是内容</p>
</li>
</ul>
</div>
)
}
}
ReactDOM.render(
<Test />,
document.getElementById('root')
)
使用map和类组件进行渲染
需要注意的是,这时候的key不应该放在li上,而是应该放在ListItem标签上
import React from 'react'
import ReactDOM from 'react-dom'
// 使用类进行列表渲染
class ListItem extends React.Component {
render () {
return (
<li>
<h3>{this.props.index}--{this.props.data.title}</h3>
<p>{this.props.index}--{this.props.data.content}</p>
</li>
)
}
}
// 列表渲染
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {
list: [
{
title: '第一个标题',
content: '第一个内容'
},
{
title: '第二个标题',
content: '第二个内容'
},
{
title: '第三个标题',
content: '第三个内容'
}
]
}
}
// 渲染函数
render () {
let listArr = []
// 使用map和类组件进行列表渲染
listArr = this.state.list.map((item, index) => {
return (
<ListItem key={index} data={item} index={index} />
)
})
return (
<div>
<ul>
{listArr}
<li>
<h3>这是标题</h3>
<p>这是内容</p>
</li>
</ul>
</div>
)
}
}
ReactDOM.render(
<Test />,
document.getElementById('root')
)
直接在render函数中的{}直接列表渲染
import React from 'react'
import ReactDOM from 'react-dom'
// 列表渲染
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {
list: [
{
title: '第一个标题',
content: '第一个内容'
},
{
title: '第二个标题',
content: '第二个内容'
},
{
title: '第三个标题',
content: '第三个内容'
}
]
}
}
// 渲染函数
render () {
return (
<div>
<ul>
{
this.state.list.map((item, index) => {
return (
<li key={index}>
<h3>{index}--{item.title}</h3>
<p>{index}--{item.content}</p>
</li>
)
})
}
<li>
<h3>这是标题</h3>
<p>这是内容</p>
</li>
</ul>
</div>
)
}
}
ReactDOM.render(
<Test />,
document.getElementById('root')
)