Javascript 如何将JSX react对象返回到网页？

这个函数构建每个jsx对象网格并返回它

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>
                    );

}

功能网格构建器（网格，i，j）{
//const classes=useStyles（）；
返回(
{grid[i][j]}
);
}

我需要附加到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);

}

导出默认函数表（）{
让grid=RandomGrid（）
让行=grid.length
设cols=grid[0]。长度
对于（var i=0；i

只将单个对象传递给grid_builder（）函数。使用camelCase名称，如

gridBuilder

，或将其作为组件，如

gridBuilder

函数gridBuilder（itemInfo）{
//const classes=useStyles（）；
返回(
{itemInfo}
);
}
导出默认函数表（）{
让grid=RandomGrid（）
返回grid.map（gridBuilder）；
}

这应该可以完成工作

  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;

const gridArray=[]
对于（var i=0；i

---

我不确定您的用例，但我认为用这种方法创建网格不是一个好主意，css网格也非常强大，也许可以尝试用它来解决您的问题，因为它们会更高效。

我是投反对票的人，因为您的示例与OP的代码不兼容。谢谢，但这会以网格格式返回吗？@EmileBergeron谢谢。依我看，

array.map（）

是OP想要的东西我同意

map

、传递对象和为项目创建组件都是很好的做法，但在这种情况下，它在您提供的示例中不起作用。您至少需要在映射内部进行映射，比如

grid.map（i=>i.map（gridBuilder））

。