反應：用數組信息按列填充表格

Question

我對 React 有點陌生，想知道是否可以在給定這樣的數組的情況下按列填充表格：

 arrayEx = ['John', '123 Address', 13, 6, 'Mike', '456 Address', 17, 5]

桌子看起來像這樣

雖然如果有人可以幫助我創建一個看起來像這樣的表格，這可能有點極端，

我也很感激。 我找不到像 React 中的第二張圖片那樣打印表格的方法。 如果有人能幫我拿到第二張照片，我可能會想辦法讓它看起來像第一張照片，但我想我會要求第一張照片，以防萬一有人知道，偶然。

先感謝您！

Answer 1

您對數據結構有任何控制權嗎？ 這不是組織數據的好方法。 一個更常見、更方便的結構是

arrayEx = [ { name: 'John', address: '123 Address', age: 13, height: 6 }, ... ]

此外，您使用單詞 table，但我假設您不必使用實際的<table>元素，因為您想要的布局並不真正需要它。

鑒於這一切，這就是我建議在 React 中呈現數據的方式。

...
return (
  <div>
    <div>Table 1</div>
    <ul>
      {arrayEx.map((person, idx) => (
         <li>
           {person.name}
             <ul>
               <li>{person.address}</li>
               <li>{person.age}</li>
               <li>{person.height}</li>
             </ul>
         </li>
      )}
    </ul>
  </div>
)