ReactJS 将 2 个数组转换为表

Question

我有 2 个数组，我想在表格中呈现它们。const arr1 = ["item1","item2","item3","item4"]const arr2 = ["price1","price2","price3","price4"]我想将其转换为<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>注意：数组保证具有相同的长度。有人可以建议如何在 React 中动态完成此操作。

Answer 1

您可以将所有行存储在一个数组中，然后在以下位置使用它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>

  );

}

Answer 2

如果数组总是有相同的长度，你可以使用 map 或类似的东西。

<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>