數(shù)據(jù)如下
const books = [
{ bookname: '1', time: '一號',},
{ bookname: '2', time: '二號'},
{ bookname: '3', time: '三號'},
{bookname: '4', time: '四號'}
]
實(shí)現(xiàn)一
我們使用for循環(huán)
先用一個(gè)數(shù)組來存放你的數(shù)據(jù)
const booksElements = [] // 保存每本書渲染以后 JSX 的數(shù)組
在用for循環(huán)來取出來踏幻，再加到我們剛剛定義好的數(shù)組里面近顷，然后返回給頁面遂赠。
for (let book of books) {
booksElements.push( // 循環(huán)每本書桐罕，構(gòu)建 JSX脉让，push 到數(shù)組中
<div>
<div>書名：{book.bookname}</div>
<div>出版時(shí)間：{book.time}</div>
<hr />
</div>
)
}
然后直接用表達(dá)式插入到頁面。
實(shí)現(xiàn)二
我們可以使用ES6的map數(shù)據(jù)結(jié)構(gòu)來遍歷列表數(shù)據(jù)功炮，
{
books.map((book) => {
return (
<div>
<div>書名：{book.bookname}</div>
<div>出版時(shí)間：{book.time}</div>
<hr />
</div>
)
})
}
實(shí)現(xiàn)三
根據(jù)實(shí)現(xiàn)二溅潜，我們可以把每一個(gè)數(shù)據(jù)的結(jié)構(gòu)抽離出來，形成一個(gè)獨(dú)立的組件
const { book } = this.props
return (
<div>
<div>書名：{book.bookname}</div>
<div>出版時(shí)間：{book.time}</div>
<hr />
</div>
)
然后在主組件中套如該組件
return (
<div>
{books.map((book) => <Book book={book} />)}
</div>
)
然后渲染到頁面
接下來我們給每一個(gè)數(shù)據(jù)加上key薪伏，其實(shí)我們在后臺獲取來的數(shù)據(jù)都是有一個(gè)id的滚澜，但是這里我們?yōu)榱四軠y試成功，我們就給他一個(gè)數(shù)嫁怀，通過循計(jì)數(shù)i作為key
return (
<div>
{books.map((book, i) => <Book key={i} book={book} />)}
</div>
)
