日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中遍歷數組生成標簽問題_React

作者：我叫胡八一 ? 更新時間： 2023-03-13 編程語言

React遍歷數組生成標簽

舉一個例子

一個列表根據數組渲染li元素，在vue中一個v-for就解決了，那在React中怎么實現呢？

這里我們直接引入的React文件，沒用腳手架

let arr = [1,2,3];
? ? ? ? ReactDOM.render(<ul>
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? arr.map(value => <li key={value}>{value}</li>)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? </ul>,document.querySelector('#root'))

但這里為什么用map方法呢，因為map會返回一個新數組，在這個地方就等價于返回了這個數組

let arr = [<li>1</li>, <li>2</li>, <li>3</li>]

渲染的也就是這個數組。

React功能實現-數組遍歷渲染

在react中如何將一個數組遍歷,并且逐個渲染在頁面上?

1.在jsx渲染中

如果這個變量是一個數組，則會展開這個數組的所有成員.

var arr = [
? ? ? <h1>Hello world!</h1>,
? ? ? <h2>React is awesome</h2>,
? ? ];
? ? ReactDOM.render(
? ? ? <div>{arr}</div>,
? ? ? document.getElementById('example')
? ? );

example元素中將產生兩個div,一個里面有h1標簽和一個里面有h2標簽.

2.array.map().

<ul>
? ? ? ? {?
? ? ? ? ? ? arr.map(function(val){?
? ? ? ? ? ? ? ? return <li>{val}</li>
? ? ? ? ? ? })</ul>

array.map()的參數為一個函數,這個函數是每個array中的元素應該執行的函數,參數為val.

其實這個方法也是依賴于第1個特性的,因為array.map()是有返回值的,返回值是一個新數組.所以最終相當于<ul>{newArray}</ul>

3.為什么不能用forEach()?

因為forEach()沒有返回值

總結

原文鏈接：https://blog.csdn.net/weixin_51345674/article/details/113933949

欄目分類
最近更新