ReactJS用js呈现元素

Question

假设我有：

class myComponent extends Component {

myFunction() {
//I would like to loop through two iterables, and make as many rows and columns
    let r;
    for (let i= 0; i <= SMTH1; i++) {
//add a <tr> opening tag
      for (let j= 0; j <= SMTH2; j++) {
        // add a <td> opening and </td> closing
        }
//add a </td> closing tag
    }

      return r;
}

render() {
    return <div>
      <table>
        {this.myFunction()}
        </table>
    </div>;
  }
}

我如何使它最终具有SMTH1行量，每个行包含SMTH2列量？

Answer 1

看起来您希望决定要创建多少行和列。您可以使用array(ROW_COUNT).fill(ELEMENT)语法来完成此操作。只要传递您要myfunction的行和cols，它就会为您创建表。

js prettyprint-override">myFunction(rows, cols) {

  return (
    <table>
      {Array(rows)
        .fill(null)
        .map((row) => {
          return (
            <tr>
              {Array(cols)
                .fill(null)
                .map((col) => {
                  return <td>Your Cell</td>;
                })}
            </tr>
          );
        })}
    </table>
  );
}

// use it like this myFunction(10, 10);