如何在Inertia.js（React）函数式页面中捕获页面加载事件？

1. 组件首次挂载时执行（替代componentDidMount） #

在函数式组件中，React的useEffect钩子是类组件生命周期方法的替代方案。当你需要在页面（组件）首次加载完成后修改样式，直接使用空依赖数组的useEffect即可，它会在组件挂载完成（DOM渲染完毕）后执行一次，效果和componentDidMount完全一致：

import { useEffect } from 'react';

export default function YourPage() {
  useEffect(() => {
    // 这里编写修改几何样式的DOM操作逻辑
    const targetElement = document.getElementById('styled-element');
    if (targetElement) {
      targetElement.style.width = '100%';
      targetElement.style.minHeight = '300px';
      targetElement.style.borderRadius = '8px';
    }
  }, []); // 空数组表示仅在组件首次挂载时执行

  return (
    <div id="styled-element">
      {/* 页面内容 */}
    </div>
  );
}

2. 监听全局Inertia页面切换事件 #

如果需要在每次Inertia页面跳转完成后都执行样式修改（而非仅当前组件首次挂载），可以使用两种方式：

方式一：组件内监听页面变化

通过usePage钩子获取当前页面实例，将其作为useEffect的依赖，每次页面切换时触发样式修改：

import { useEffect } from 'react';
import { usePage } from '@inertiajs/react';

export default function YourPage() {
  const page = usePage();

  useEffect(() => {
    adjustGlobalStyles();
  }, [page]); // 页面切换时，page对象更新，触发回调

  const adjustGlobalStyles = () => {
    const header = document.querySelector('.app-header');
    if (header) {
      header.style.padding = page.props.isMobile ? '0.5rem' : '1rem';
    }
  };

  return <div className="app-header">页面头部</div>;
}

方式二：全局监听Inertia事件

在项目的全局入口文件（如app.js）中，通过Inertia的全局事件监听finish事件，每次页面加载完成后执行统一的样式逻辑：

import { Inertia } from '@inertiajs/inertia';

// 全局监听页面加载完成事件
Inertia.on('finish', () => {
  const mainContent = document.querySelector('.main-content');
  if (mainContent) {
    mainContent.style.marginTop = '60px';
  }
});

注意事项 #

• 操作DOM时，务必通过条件判断确保目标元素存在，避免出现null报错；
• 如果样式修改依赖组件内的状态或props，需将对应的依赖项加入useEffect的依赖数组，避免闭包导致的旧值问题。

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