Question

我正在尝试创建具有许多单元格的表行。我有一个数组数组，其中父数组长度是行数，而子数组具有表单元格。我了解并且我在地图中有地图，但是我在弄清楚它时遇到了麻烦。这就是我现在所拥有的，但这只是第一个映射。我不知道第二个。

let fakeTableList = [
    ["pw-conan",
    "Conan Matusov",
    "conan@meridian.com",
    "+1-647-455-5556",
    "L4J",
    "7/16/2020",
    "ACTIVE",
    "Starter"],
    ["pw-briand",
     "Brian Jones",
     "brian@whatever.com",
     "+1-647-455-5557",
     "M4P",
     "7/25/2020",
     "ACTIVE",
     "Starter"]
];
let fakeTable = fakeTableList.map((item, i) => {
    return (
        <tr>
            <td key={i} value={item}>{item}</td>
        </tr>
    );
});

Answer 1

您看起来像这样吗

let fakeTableList = [
  ["pw-conan",
  "Conan Matusov",
  "conan@meridian.com",
  "+1-647-455-5556",
  "L4J",
  "7/16/2020",
  "ACTIVE",
  "Starter"],
  ["pw-briand",
   "Brian Jones",
   "brian@whatever.com",
   "+1-647-455-5557",
   "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>
  );
}

Live working demo

Answer 2

let fakeTableList = [
    ["pw-conan",
    "Conan Matusov",
    "conan@meridian.com",
    "+1-647-455-5556",
    "L4J",
    "7/16/2020",
    "ACTIVE",
    "Starter"],
    ["pw-briand",
     "Brian Jones",
     "brian@whatever.com",
     "+1-647-455-5557",
     "M4P",
     "7/25/2020",
     "ACTIVE",
     "Starter"]
];
let fakeTable = fakeTableList.map((item, i) => {
    return (
        <tr>
            {item.map((s) => <td key={i} value={s}>{s}</td>)}
        </tr>
    );
});

使用多个表单元格对多个表行进行.map反应

2 个答案: