使用 for 循环在 React/JSX 中创建 ZxZ table

Question

我正在尝试创建一个 5x5 table，其中每个单元格都是一个按钮，使用 React/JSX。以下在 SandBox 中引发错误：

import "./styles.css";
import React from "react";

const makeCell = () => {
  return ( 
     <td>
       <button/>
     </td>
     )
};

const makeRow = () => {
  return( 
    <tr>
      {
        for (let=i; i<=5; i++){
          makeCell();
        }
      }
    </tr> 
  )
};

const makeTable = () => {
  return( 
    <table>
      {
        for (let=i; i<=5; i++){
          makeRow();
        }
      }
    </table> 
  )  
};

export default function App() {
  return (
    <div>
      <makeTable/>
    </div>
  );
}

/src/App.js：意外标记 (16:8) 14 | 15 | { > 16 |对于 (let=i; i<=5; i++){ | ^ 17 |制作细胞（）； 18 | } 19 | } 浏览器

解析错误：意外的标记 14 | 15 | { > 16 |对于 (let=i; i<=5; i++){ | ^ 17 |制作细胞（）； 18 | } 19 | }（空）

在 React 中生成 ZxZ table 最简单和最简洁的方法是什么？你能解释一下为什么这种方法不起作用吗？

Answer 1

Codesandbox link: https://codesandbox.io/s/amazing-frog-c5h6hv?file=/src/App.js


export default function App() {
  return (
    <Table />
  );
}

const Table = () => {
  return (
    <table>
      <tbody>
        {Array(5)
          .fill(null)
          .map((_, index) => (
            <Row key={index} />
          ))}
      </tbody>
    </table>
  );
};

const Row = () => {
  return (
    <tr>
      {Array(5)
        .fill(null)
        .map((_, index) => (
          <Cell key={index} />
        ))}
    </tr>
  );
};


const Cell = () => {
  return (
    <td>
      <button>hello</button>
    </td>
  );
};

使用 for 循环在 React/JSX 中创建 ZxZ table

Creating a ZxZ table in React/JSX using for loops

html

javascript

for-loop

jsx

reactjs