React中遍歷數(shù)組生成標(biāo)簽問題
更新時間：2023年01月17日 08:42:46 作者：我叫胡八一
這篇文章主要介紹了React中遍歷數(shù)組生成標(biāo)簽問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
React遍歷數(shù)組生成標(biāo)簽
舉一個例子
一個列表根據(jù)數(shù)組渲染li元素，在vue中一個v-for就解決了，那在React中怎么實現(xiàn)呢？
這里我們直接引入的React文件，沒用腳手架
let arr = [1,2,3];
? ? ? ? ReactDOM.render(<ul>
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? arr.map(value => <li key={value}>{value}</li>)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? </ul>,document.querySelector('#root'))但這里為什么用map方法呢，因為map會返回一個新數(shù)組，在這個地方就等價于返回了這個數(shù)組
let arr = [<li>1</li>, <li>2</li>, <li>3</li>]
渲染的也就是這個數(shù)組。
React功能實現(xiàn)-數(shù)組遍歷渲染
在react中如何將一個數(shù)組遍歷,并且逐個渲染在頁面上?
1.在jsx渲染中
如果這個變量是一個數(shù)組，則會展開這個數(shù)組的所有成員.
var arr = [
? ? ? <h1>Hello world!</h1>,
? ? ? <h2>React is awesome</h2>,
? ? ];
? ? ReactDOM.render(
? ? ? <div>{arr}</div>,
? ? ? document.getElementById('example')
? ? );example元素中將產(chǎn)生兩個div,一個里面有h1標(biāo)簽和一個里面有h2標(biāo)簽.
2.array.map().
<ul>
? ? ? ? {?
? ? ? ? ? ? arr.map(function(val){?
? ? ? ? ? ? ? ? return <li>{val}</li>
? ? ? ? ? ? })</ul>array.map()的參數(shù)為一個函數(shù),這個函數(shù)是每個array中的元素應(yīng)該執(zhí)行的函數(shù),參數(shù)為val.
其實這個方法也是依賴于第1個特性的,因為array.map()是有返回值的,返回值是一個新數(shù)組.所以最終相當(dāng)于<ul>{newArray}</ul>
3.為什么不能用forEach()?
因為forEach()沒有返回值
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了react項目實踐之webpack-dev-serve,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本文詳細介紹了React組件中的state概念,包括其定義、使用方式以及如何正確更新state,通過ES6和ES7類組件的示例,展示了如何在React中定義和使用state,感興趣的朋友跟隨小編一起看看吧2024-11-11
Native?Memory?Tracking追蹤區(qū)域示例分析
這篇文章主要為大家介紹了Native?Memory?Tracking追蹤區(qū)域示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了Ant?Design?組件庫按鈕實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪</P><P><BR>2022-08-08
這篇文章主要介紹了React?hooks中useState踩坑之異步的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
React中的setState使用細節(jié)和原理解析(最新推薦)
這篇文章主要介紹了React中的setState使用細節(jié)和原理解析(最新推薦),前面我們有使用過setState的基本使用, 接下來我們對setState使用進行詳細的介紹，需要的朋友可以參考下2022-12-12
React?Fiber構(gòu)建completeWork源碼解析
這篇文章主要為大家介紹了React?Fiber構(gòu)建completeWork源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了Redux使用方法和基本原理,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了react-router-dom5如何升級到6問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
高階組件也就是我們常說的HOC,是React中用于復(fù)用組件邏輯的一種高級技巧。這篇文章主要通過一些示例帶大家學(xué)習(xí)一下高階組件的使用，希望對大家有所幫助2023-04-04