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

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

ReactJS 將 2 個(gè)數(shù)組轉(zhuǎn)換為表

ReactJS 將 2 個(gè)數(shù)組轉(zhuǎn)換為表

梵蒂岡之花 2023-05-19 15:58:50
我有 2 個(gè)數(shù)組,我想在表格中呈現(xiàn)它們。const arr1 = ["item1","item2","item3","item4"]const arr2 = ["price1","price2","price3","price4"]我想將其轉(zhuǎn)換為<table>    <tr>        <td>item1</td>        <td>price1</td>    </tr>    <tr>        <td>item2</td>        <td>price2</td>    </tr>    <tr>        <td>item3</td>        <td>price3</td>    </tr>    <tr>        <td>item4</td>        <td>price4</td>    </tr></table>注意:數(shù)組保證具有相同的長(zhǎng)度。有人可以建議如何在 React 中動(dòng)態(tài)完成此操作。
查看完整描述

2 回答

?
侃侃爾雅

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

您可以將所有行存儲(chǔ)在一個(gè)數(shù)組中,然后在以下位置使用它table:


export default function App() {

  const arr1 = ["item1","item2","item3","item4"]

  const arr2 = ["price1","price2","price3","price4"]

  const rows = []

  for (const [index, value] of arr1.entries()) {

    rows.push(

      <tr key={index}>

        <td>{value}</td>

        <td>{arr2[index]}</td>

      </tr>

    )

  }

  return (

    <div className="App">

      <table>

        <tbody>

          {rows}

        </tbody>

      </table>

    </div>

  );

}


查看完整回答
反對(duì) 回復(fù) 2023-05-19
?
溫溫醬

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

如果數(shù)組總是有相同的長(zhǎng)度,你可以使用 map 或類(lèi)似的東西。


<table>

{

   arr1.map((element, index) => <tr>

     // The first one is the nth element from the array

     // The second one we just access through index

        <td>{element}</td>

        <td>{arr2[index]}</td>

    </tr>

)

}

</table>


或者

<table>

{

   Array(arr1.length).map((element, index) => <tr>

          // We just access through index

          <td>{arr1[index]}</td>

          <td>{arr2[index]}</td>

     </tr>)

}

</table>


查看完整回答
反對(duì) 回復(fù) 2023-05-19
  • 2 回答
  • 0 關(guān)注
  • 156 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(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)