如何將 JSX 反應對象返回到網頁？

Question

此函數構建每個 jsx obkect 網格並返回它。

function grid_builder(grid,i,j){
    // const classes = useStyles();
    return (
                <div>
                  <Grid container spacing={3}>
                    <Grid item xs={3}>
                      <Paper>{grid[i][j]}</Paper>
                    </Grid>
                  </Grid>
                 </div>
                    );

}

我需要附加到一個 JSX 對象，以便我可以返回到頁面。

export default function Table() {

  let grid = RandomGrid()
  let rows = grid.length
  let cols = grid[0].length
  for (var i = 0; i < rows; i++) { 
    for (var j = 0; j < cols; j++) { 
        // grid_builder(grid,i,j)
        }
    }
    return(//Need to return something here);

}

Answer 1

這應該可以完成工作。

  const gridArray = []
  for (var i = 0; i < rows; i++) { 
    for (var j = 0; j < cols; j++) { 
        gridArray.push(grid_builder(grid,i,j))
        }
    }
    return gridArray;

我不確定你的用例但是我認為用這種方法創建網格不是個好主意，css網格也很強大，也許可以嘗試用它來解決你的問題，因為它們會更有性能。

Answer 2

僅將單個對象傳遞給 grid_builder() 函數。 使用像gridBuilder一樣的駝峰命名或使其成為像GridBuilder這樣的組件

 function gridBuilder(itemInfo){ // const classes = useStyles(); return ( <div> <Grid container spacing={3}> <Grid item xs={3}> <Paper>{itemInfo}</Paper> </Grid> </Grid> </div> ); } export default function Table() { let grid = RandomGrid() return grid.map(gridBuilder); }

使其成為組件

 function GridBuilder(props){ // const classes = useStyles(); return ( <div> <Grid container spacing={3}> <Grid item xs={3}> <Paper {...props}>{props}</Paper> </Grid> </Grid> </div> ); } export default function Table() { let grid = RandomGrid() return grid.map(item => <GridBuilder {...item} />); }