Как я могу вернуть реагирующий объект 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 (). Используйте имена camelCase, например 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} />);
    }