reactjs - 反应 .map 具有许多表格单元格的多个表格行

Question

我正在尝试创建包含多个单元格的表格行。我有一个数组数组，其中父数组长度是行数，子数组具有表格单元格。我了解并且我在地图中有地图，但我无法弄清楚。这是我现在拥有的，但它只是第一个映射。我想不通第二个。

let fakeTableList = [
    ["pw-conan",
    "Conan Matusov",
    "[e-mail]",
    "[phone]",
    "L4J",
    "7/16/2020",
    "ACTIVE",
    "Starter"],
    ["pw-briand",
     "Brian Jones",
     "[e-mail]",
     "[phone]",
     "M4P",
     "7/25/2020",
     "ACTIVE",
     "Starter"]
];
let fakeTable = fakeTableList.map((item, i) => {
    return (
        <tr>
            <td key={i} value={item}>{item}</td>
        </tr>
    );
});

标签： reactjs

Answer 1

你看起来像这样吗

let fakeTableList = [
  ["pw-conan",
  "Conan Matusov",
  "[e-mail]",
  "[phone]",
  "L4J",
  "7/16/2020",
  "ACTIVE",
  "Starter"],
  ["pw-briand",
   "Brian Jones",
   "[e-mail]",
   "[phone]",
   "M4P",
   "7/25/2020",
   "ACTIVE",
   "Starter"]
];
export default function App() {
  return (
    <table>
    <thead></thead>
    <tbody>
     {fakeTableList.map((list,i)=>
       <tr key={i}>
         {list.map((item,indx)=>
           <td key={indx}>{item}</td>
          )}
        </tr>
      )}
    </tbody>
    </table>
  );
}

现场工作演示