使用 React 遍歷物件

2021-10-05 00:27:30 字數 1805 閱讀 3635

"./js/react.development.js"

>

<

/script>

"./js/react-dom.development.js"

>

<

/script>

"./js/babel.js"

>

<

/script>

"/data.js"

>

<

/script>

做好全部準備之後,我們就可以開幹了。

"box"

>

<

/div>

"text/babel"

>

const=(

)=>

reactdom.

render

(>

, document.

getelementbyid

("box"))

<

/script>

<

/body>

"text/babel"

>

const

list

= props =>

const

group

= props=>

const=(

)=>

reactdom.

render

(>

, document.

getelementbyid

("box"))

<

/script>

這樣我們就把我們需要的好友例表的字樣顯示出來了

接下來就是把我們所渲染的物件遍歷出來就可以成功的把我們所需要的資料渲染出來了

"text/babel"

>

const

list

= props =>

>

<

/span>

<

/span>

<

/li>})

}<

/ul>)}

const

group

= props =>

<

/h3>

/>

<

/div>)}

const=(

)=>

name=

list=

/>})

}<

/div>)}

reactdom.

render

(>

, document.

getelementbyid

("box"))

<

/script>

這樣就可以把我們所需要的資料渲染出來了

但是如果你認真觀察,你會發現我們還沒有把變紅的資料渲染出來,仔細觀察會發現,在我們需要渲染的data檔案裡面還有乙個vip屬性沒有用上。下面我們使用vip屬性把需要染紅的資料染紅。

其實很簡單,我們只需要給message資料做乙個判斷,判斷它的vip屬性是否為真,如果為真就渲染成紅色,如果為假就為空就行了。如下:

}>

<

/span>

這樣,我們就把所需要的效果完整的渲染出來了!

react遍歷陣列和物件

map陣列 react中遍歷陣列採用陣列的map迭代 注意 在map中要加key key 幫助 react 識別哪些元素改變了,比如被新增或刪除。因此你應當給陣列中的每乙個元素賦予乙個確定的標識 虛擬dom對比的時候,加key可以避免出錯。如果不加key,當乙個元素新增的時候,後面的元素就會經歷解除...

陣列物件 react裡陣列和物件的遍歷渲染

在vue裡遍歷渲染陣列列表我們用的v for,而在react裡遍歷渲染陣列列表我們直接用陣列的map方法,當然也可以用for.in或陣列的foreach方法等。react列表渲染title script script script head div react列表渲染 let arr 打王者 刷抖音...

python 遍歷物件 python遍歷物件列表

我有乙個物件列表,其中包含電子 中的 名稱 範圍 在處理電子 時,我需要更新與範圍相關的值。儲存此資訊的類如下所示 class varname name none refersto none referstor1c1 none value none def init self,name,refers...