如何呈现多个反应表

Question

我有一个由反应表组成的数组的数组。我想在react / typescript中渲染它们。我怎样才能做到这一点。我不确定如何在return函数中使用for循环。下面的代码呈现了一个单独的表，但是我想呈现所有表。

function reactBootstrapTable(localtable) {
  return (
    <BootstrapTable
      wrapperClasses="table-responsive"
      keyField="id"
      data={localtable}
      columns={columns}
      striped="true"
      hover="true"
      condensed="true"
    />
  );
}

return (
  reactBootstrapTable(countryListOfTables[0][0][0])
);

最终结果是拥有三个级别的手风琴。主要的主要手风琴将代表外部数组中的元素。该主手风琴内部将有多个辅助手风琴，它们代表第二个内部数组的数据。然后，第三个内部数组将分别以自己的手风琴呈现表格。因此，例如：“外部手风琴”将是国家（由最外面的数组表示），单击它将会展开它并显示代表州的多个内部手风琴，然后单击任何一个州将显示城市名称的手风琴，例如“ New”约克。单击纽约将为我显示一张包含纽约地方及其人口的表。

Answer 1

使用Array.map()，它返回一个数组，在这种情况下是JSX对象。然后，您可以使用map函数的第一个参数将变量传递给组件，例如el.localtable和el.columns（如果您采用了这种结构）：

function reactBootstrapTable(localtable) {
  return (
     myArr.map((el) => {
       return(
         <BootstrapTable
           wrapperClasses="table-responsive"
           keyField="id"
           data={el.localtable}
           columns={el.columns}
           striped="true"
           hover="true"
           condensed="true"
         />
      )
    }
  )
}