首頁猿問 ReactJS - JSX...

ReactJS - JSX 映射數組以形成元素，但將每四個元素分組

JavaScript

撒科打諢 2023-10-14 17:01:51

我想使用語義 UI 創建一個包含大約 30 個元素的表單，如下所示： <Form.Input id="survive" type="number" label="survive" required />所以我想到創建一個包含所有Form.Inputid 和map它們的數組，如下所示：return ( myArray.map((element) => { <Form.Input id={element} label={element} type="number"/> })如何使用 array.map() 函數將每四個元素分組在一起？手動它會像這樣工作，但我確信有一種更有效的方法可以像這樣手動進行<Form.Group> <Form.Input id="1"/> <Form.Input id="2"/> <Form.Input id="3"/> <Form.Input id="4"/></Form.Group>

查看完整描述

3 回答

桃花長相依

TA貢獻1860條經驗獲得超8個贊

您不能僅僅.map(..)因為.map(..)返回一個與原始數組具有相同數量元素的數組而執行此操作，并且預期結果是一個具有myArray.length / 4多個元素的數組。

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

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>

))

其作用是首先創建一個二維數組（內部數組有 4 個元素），然后映射第一維和第二維。

反對回復 2023-10-14

浮云間

TA貢獻1829條經驗獲得超4個贊

您可以映射數組塊。

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>

}

反對回復 2023-10-14

神不在的星期二

TA貢獻1963條經驗獲得超6個贊

你可以這樣做

return <Form.Group>

{

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

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

}

</Form.Group>

反對回復 2023-10-14

3 回答
0 關注
153 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

ReactJS - JSX 映射數組以形成元素，但將每四個元素分組

ReactJS - JSX 映射數組以形成元素，但將每四個元素分組

3 回答

添加回答

ReactJS - JSX 映射數組以形成元素，但將每四個元素分組

ReactJS - JSX 映射數組以形成元素，但將每四個元素分組