将空 table 行添加到 Table 直到它有一定数量的行

Question

有一个table，它必须有固定的行数，比方说10行。如果有数据的行少于10行，则必须添加“空”行直到有10行。

到目前为止，如果少于 10 个，代码将添加一行：

  import { Table } from 'semantic-ui-react';

  ...

  {rows.length < 10 ? (
    <Table.Row
      className="disabled-row">
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
    </Table.Row>
  ) : (
    ''
  )}

有没有办法使用 forEach() 或 while() 之类的东西为 row.length 和 10 之间的每次迭代添加一个新行？

如果可能的话，它也可以用于 table 个单元格，而不是编写 8 个相同的单元格来编写一个函数。

Answer 1

如果行长度小于 10，您可以在行上使用映射。试试这个。希望有用。

{rows.length < 10 && (
  <Table.Row className="disabled-row">
    {rows.map((item, index) => {
      return (
        <Table.Cell id="cta" textAlign="right" key={index}>
          {item}
        </Table.Cell>
      );
    })}
 </Table.Row>   
)}

Answer 2

您可以像这样动态打印行：

<Table.Row className="disabled-row">
          
  {
    [...Array(10 - row.length)].map((e, i) => <Table.Cell id="cta" 
    textAlign="right"></Table.Cell>
  }

</Table.Row>

将空 table 行添加到 Table 直到它有一定数量的行

Add empty table rows to a Table until it has a certain number of rows

javascript

reactjs

semantic-ui