React中<h2>标签能否使用onLoad事件？绑定函数为何未执行？

1. <h2>标签是否支持onLoad函数？ #

不支持。onLoad事件仅针对需要加载外部资源的元素（比如<img>、<script>、<iframe>），<h2>这类普通文本块级元素没有该事件，绑定后不会触发任何效果。

2. 函数未在加载时执行的原因 #

• 核心原因是<h2>不支持onLoad，绑定的curMonth函数根本不会被调用。
• 另外，你用document.querySelector直接操作DOM的写法不符合React的设计逻辑：React是数据驱动视图，手动修改DOM会绕过React的状态管理，且如果函数执行时机早于组件渲染完成，还会出现找不到DOM元素的情况（导致listedMonth为空，设置textContent自然无效）。

正确的React实现方式 #

推荐用React的状态和钩子来处理，无需手动操作DOM：

方法1：直接渲染时计算月份（最简单）

先修改calendar.js中的函数，只返回月份名称，不操作DOM：

// calendar.js
function getCurMonthName() {
  const monthName = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  const today = new Date();
  return monthName[today.getMonth()];
}

export { getCurMonthName };

然后在组件中直接调用：

// 组件文件
import { getCurMonthName } from '../../calendar';

function Calendar() {
  return (
    <div className="calendar">
      <h2>{getCurMonthName()}</h2>
    </div>
  );
}

export default Calendar;

方法2：用useEffect在组件挂载时执行（适合复杂逻辑）

如果需要在组件加载时执行额外操作，用useEffect钩子：

// 组件文件
import { useState, useEffect } from 'react';

function Calendar() {
  const [month, setMonth] = useState('September'); // 设置默认值

  useEffect(() => {
    // 组件挂载完成后执行一次
    const monthName = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    const today = new Date();
    setMonth(monthName[today.getMonth()]);
  }, []); // 空依赖数组确保只执行一次

  return (
    <div className="calendar">
      <h2>{month}</h2>
    </div>
  );
}

export default Calendar;

内容的提问来源于stack exchange，提问作者leguchi