如何将 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} />);
    }