第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

ReactJS - JSX 映射數(shù)組以形成元素，但將每四個(gè)元素分組

ReactJS - JSX 映射數(shù)組以形成元素，但將每四個(gè)元素分組

撒科打諢 2023-10-14 17:01:51
我想使用語(yǔ)義 UI 創(chuàng)建一個(gè)包含大約 30 個(gè)元素的表單，如下所示：     <Form.Input        id="survive"        type="number"        label="survive"        required      />所以我想到創(chuàng)建一個(gè)包含所有Form.Inputid 和map它們的數(shù)組，如下所示：return (        myArray.map((element) => {           <Form.Input id={element} label={element} type="number"/>        })如何使用 array.map() 函數(shù)將每四個(gè)元素分組在一起？手動(dòng)它會(huì)像這樣工作，但我確信有一種更有效的方法可以像這樣手動(dòng)進(jìn)行<Form.Group>    <Form.Input id="1"/>    <Form.Input id="2"/>    <Form.Input id="3"/>    <Form.Input id="4"/></Form.Group>
查看完整描述

3 回答

?
桃花長(zhǎng)相依

TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超8個(gè)贊

您不能僅僅.map(..)因?yàn)?code>.map(..)返回一個(gè)與原始數(shù)組具有相同數(shù)量元素的數(shù)組而執(zhí)行此操作，并且預(yù)期結(jié)果是一個(gè)具有myArray.length / 4多個(gè)元素的數(shù)組。

.reduce(..)要實(shí)現(xiàn)此目的，您可以使用和的組合.map(..)，下面是一個(gè)示例：

myArray.reduce((a, c, i) => {

? if (i % 4 === 0) {

? ? a.push([]);

? }

? a[a.length - 1].push(c);

? return a;

}, []).map((arr) => (

? <Form.Group>

? ? {arr.map(element => (<Form.Input id={element} label={element} type="number"/>))}

? </Form.Group>

))

其作用是首先創(chuàng)建一個(gè)二維數(shù)組（內(nèi)部數(shù)組有 4 個(gè)元素），然后映射第一維和第二維。


查看完整回答
反對(duì) 回復(fù) 2023-10-14
?
浮云間

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊

您可以映射數(shù)組塊。

const chunk = (arr, size) => Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>

arr.slice(i * size, i * size + size)

);

映射 4 塊并形成組


chunk(myArray).map(ch=>{

? ? //Return a group

? ? <Form.Group>

? ? {ch.map(element=>{

? ? ? ? //return element

? ? })}

? ? </Form.Group>

}


查看完整回答
反對(duì) 回復(fù) 2023-10-14
?
神不在的星期二

TA貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊

你可以這樣做


return <Form.Group>

{

    myArray.map((element , index) => {

           return <Form.Input key={index} id={element} label={element} type="number"/>

    }

}

</Form.Group>


查看完整回答
反對(duì) 回復(fù) 2023-10-14
  • 3 回答
  • 0 關(guān)注
  • 165 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)