React中遍歷數(shù)組生成標(biāo)簽問題
React遍歷數(shù)組生成標(biāo)簽
舉一個(gè)例子
一個(gè)列表根據(jù)數(shù)組渲染li元素，在vue中一個(gè)v-for就解決了，那在React中怎么實(shí)現(xiàn)呢？
這里我們直接引入的React文件，沒用腳手架
let arr = [1,2,3];
? ? ? ? ReactDOM.render(<ul>
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? arr.map(value => <li key={value}>{value}</li>)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? </ul>,document.querySelector('#root'))但這里為什么用map方法呢，因?yàn)閙ap會(huì)返回一個(gè)新數(shù)組，在這個(gè)地方就等價(jià)于返回了這個(gè)數(shù)組
let arr = [<li>1</li>, <li>2</li>, <li>3</li>]
渲染的也就是這個(gè)數(shù)組。
React功能實(shí)現(xiàn)-數(shù)組遍歷渲染
在react中如何將一個(gè)數(shù)組遍歷,并且逐個(gè)渲染在頁面上?
1.在jsx渲染中
如果這個(gè)變量是一個(gè)數(shù)組，則會(huì)展開這個(gè)數(shù)組的所有成員.
var arr = [
? ? ? <h1>Hello world!</h1>,
? ? ? <h2>React is awesome</h2>,
? ? ];
? ? ReactDOM.render(
? ? ? <div>{arr}</div>,
? ? ? document.getElementById('example')
? ? );example元素中將產(chǎn)生兩個(gè)div,一個(gè)里面有h1標(biāo)簽和一個(gè)里面有h2標(biāo)簽.
2.array.map().
<ul>
? ? ? ? {?
? ? ? ? ? ? arr.map(function(val){?
? ? ? ? ? ? ? ? return <li>{val}</li>
? ? ? ? ? ? })</ul>array.map()的參數(shù)為一個(gè)函數(shù),這個(gè)函數(shù)是每個(gè)array中的元素應(yīng)該執(zhí)行的函數(shù),參數(shù)為val.
其實(shí)這個(gè)方法也是依賴于第1個(gè)特性的,因?yàn)閍rray.map()是有返回值的,返回值是一個(gè)新數(shù)組.所以最終相當(dāng)于<ul>{newArray}</ul>
3.為什么不能用forEach()?
因?yàn)閒orEach()沒有返回值
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React Hooks之使用useCallback和useMemo進(jìn)行性能優(yōu)化方式
這篇文章主要介紹了React Hooks之使用useCallback和useMemo進(jìn)行性能優(yōu)化方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
React 進(jìn)入頁面后自動(dòng) focus 到某個(gè)輸入框的解決方案
React.js 當(dāng)中提供了 ref 屬性來幫助我們獲取已經(jīng)掛載的元素的 DOM 節(jié)點(diǎn),你可以給某個(gè) JSX 元素加上 ref屬性,這篇文章主要介紹了React 進(jìn)入頁面以后自動(dòng) focus 到某個(gè)輸入框,需要的朋友可以參考下2024-02-02
react實(shí)現(xiàn)組件狀態(tài)緩存的示例代碼
本文主要介紹了react實(shí)現(xiàn)組件狀態(tài)緩存的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了React forwardRef用法,forwardRef允許你的組件使用ref將一個(gè)DOM節(jié)點(diǎn)暴露給父組件，本文結(jié)合案例分析給大家講解的非常詳細(xì)，需要的朋友可以參考下2023-06-06
在Rust中,Trait是一個(gè)核心概念,它允許我們定義類型應(yīng)該具有的行為,本文就來具體介紹一下Rust中Trait的使用,感興趣的可以了解一下,感興趣可以了解一下2024-03-03
react-redux及redux狀態(tài)管理工具使用詳解
Redux是為javascript應(yīng)用程序提供一個(gè)狀態(tài)管理工具集中的管理react中多個(gè)組件的狀態(tài)redux是專門作狀態(tài)管理的js庫（不是react插件庫可以用在其他js框架中例如vue，但是基本用在react中），這篇文章主要介紹了react-redux及redux狀態(tài)管理工具使用詳解,需要的朋友可以參考下2023-01-01
React tabIndex使非表單元素支持focus和blur事件
這篇文章主要為大家介紹了React使用tabIndex使非表單元素支持focus和blur事件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
詳解React?ISR如何實(shí)現(xiàn)Demo
這篇文章主要為大家介紹了React?ISR如何實(shí)現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Redux是JavaScript狀態(tài)容器，提供可預(yù)測化的狀態(tài)管理，今天通過本文給大家分享redux在react中使用及配置redux到react項(xiàng)目中的方法，感興趣的朋友跟隨小編一起看看吧2021-06-06
手把手教您實(shí)現(xiàn)react異步加載高階組件
這篇文章主要介紹了手把手教您實(shí)現(xiàn)react異步加載高階組件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04