Javascript 如何使函数在react加载后运行

我有这个功能，在我的react项目中，witch将创建并加载一个表。函数之后是我的html代码，但每次执行代码时，

文档的getElementById

都未定义。我尝试在

div

中使用

onLoad

，但函数不执行

我尝试在返回后运行该函数，但它仍然不起作用。我已经对代码做了太多更改，不知道该怎么办。有人能帮忙吗？谢谢

export default function Calendario(){
 function desing_calendario(){
    let height = 5
    let width = 7
    var html = "<table cellpadding=0 cellspacing=0>";
  
    for (let i = 0;i < height;i++){
     html += "<tr>" 
     for(let a = 0;a < width;a++){
       html += "<td>"
       html += (a+1)
       html += "</td>"
     }
     html += i
     html += "</tr>";
    }
    html += "</table>"
  
    document.getElementById('calendario').innerHTML = html ;
  }
 return(
        <div id='calendario' onload="desing_calendario()">
        </div>
 );
}

导出默认函数Calendario（）{
功能设计{
让高度=5
让宽度=7
var html=“”；
for（设i=0；i

不要过多地讨论您试图通过表实现什么和不实现什么的细节。让我们直接进入箭头函数。它们将帮助您的代码更加简洁，当然也有助于解决您可能遇到的任何绑定问题。快速查看一下，我想您可以将desing_calendario函数的第一行更改为：

const desing_calendario = () => {

然后使用onload，您可以简单地引用函数的变量

onload={desing_calendario}

---

话虽如此，花时间学习更多关于钩子的知识是值得的。在这种情况下，具体使用效果。您已经在使用一个功能组件。因此，进行迁移的工作量不会太大。另外，我建议使用while循环，而不是使用旧的for循环语法。会更干净。而（i我建议您遵循本教程，本教程将介绍这些基础知识。您所需的HTML看起来无效。

不应该将文本节点作为相邻的同级节点-它应该只具有

同级节点。通常不应该像在React项目中那样对DOM进行命令式操作。我相信这不是你想要的答案，但我认为你只需要找到一些好的教程，涵盖使用React的基础知识。