如何在React页面加载时自动切换background-image无需点击按钮

• 问题1：onLoad 事件不支持绑定在 <button> 元素上，该事件仅对 <img>、<script>、<iframe>、<body> 等需要加载外部资源的元素生效，因此页面重载时不会触发你绑定的回调逻辑。页面/组件挂载时要执行的逻辑，在函数组件中应使用 useEffect 钩子实现。
• 问题2：background 状态是用于存储单张背景图地址的字符串类型，你直接传入整个图片数组 list 赋值，会导致 backgroundImage 拼接的 url() 内容非法，无法正常加载背景。如果需要随机切换背景，应该从数组中随机取出单个元素赋值；如果需要轮播切换，可搭配定时器循环取值。

方案1：组件挂载时随机切换一张背景图 #

import { useState, useEffect } from 'react';
import img1 from '../images/img1.jpg';
import img2 from '../images/img2.jpg';
import img3 from '../images/img3.jpg';

const YourComponent = () => {
  const [background, setBackground] = useState(img1);
  const list = [img1, img2, img3];

  // 空依赖数组表示仅在组件挂载时执行一次，对应页面加载时机
  useEffect(() => {
    // 从数组中随机取一张图
    const randomIndex = Math.floor(Math.random() * list.length);
    setBackground(list[randomIndex]);
  }, []);

  const css = {
    backgroundImage: `url(${background})`,
    // 可根据需求补充背景样式
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    minHeight: '100vh'
  };

  return (
    <div style={css}>
      {/* 不需要触发切换的按钮可直接删除 */}
    </div>
  );
}

export default YourComponent;

方案2：组件挂载后自动定时轮播切换背景图 #

如果需要持续循环切换背景，可添加定时器实现：

import { useState, useEffect } from 'react';
import img1 from '../images/img1.jpg';
import img2 from '../images/img2.jpg';
import img3 from '../images/img3.jpg';

const YourComponent = () => {
  const [background, setBackground] = useState(img1);
  const list = [img1, img2, img3];

  useEffect(() => {
    // 每3秒切换一次背景，可自行调整间隔时长
    const timer = setInterval(() => {
      setBackground(prev => {
        const currentIndex = list.findIndex(img => img === prev);
        const nextIndex = (currentIndex + 1) % list.length;
        return list[nextIndex];
      });
    }, 3000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(timer);
  }, []);

  const css = {
    backgroundImage: `url(${background})`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    minHeight: '100vh'
  };

  return (
    <div style={css}>
    </div>
  );
}

export default YourComponent;

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