首先我們模擬一下后臺傳過來的數(shù)據(jù),這里為了讓代碼清晰，數(shù)據(jù)就簡單的模擬了一下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import bg3 from './image/bg3.png'constructor(props){ super(props) this.state = { ///這里 list:[ { id:1,img:bg3}, { id:2,img:bg3}, { id:3,img:bg3}, { id:4,img:bg3}, { id:5,img:bg3}, ], /// }} |
然后在使用map方法循環(huán)出來
|
1
2
3
4
5
6
7
8
9
10
11
|
{ this.state.list.map((item,key) => { return ( <div className="winfor" onClick={() => console.log(item.id)}> <img src={item.img} className="winforimg" /> </div> ) })} |
補(bǔ)充：React 循環(huán)列表
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
import React, {Component} from 'react';import logo from './logo.svg';import './App.css';import {Person,Twoway} from './Person/Person' class App extends Component{ state={ persons:[{name:'小仙女',age:'18'},{name:'小玉',age:'18'},{name:'家璇',age:'18'}], } render(){ const listItems = this.state.persons.map((item,index) => <Person name={item.name} age={item.age} key={index} /> ); return( <div className="App"> {listItems} </div> ) } } export default App; |
到此這篇關(guān)于react循環(huán)數(shù)據(jù)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)react循環(huán)數(shù)據(jù)內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_42821697/article/details/111172982
