React如何根据图片上传状态动态给body元素添加/移除样式类

你已经通过uploadingImage状态标记了上传中的阶段，只需要通过副作用钩子监听这个状态，同步操作body的类名即可，不需要改动原有上传的核心逻辑。

核心逻辑 #

• 引入useEffect处理DOM操作类副作用，避免在Promise的then/catch分支里重复写DOM操作代码
• 当uploadingImage变为true时，给body节点添加指定的上传态类名
• 当uploadingImage变为false时，移除对应类名
• 增加组件卸载时的清理逻辑，防止类名残留在body上造成样式污染

完整修改后代码 #

import { useState, useEffect } from 'react';

// 组件内其他逻辑保持不变
const [uploadingImage, setUploadingImage] = useState(false)

// 监听上传状态同步body类名
useEffect(() => {
  // 替换成你需要挂载的自定义类名
  const uploadClassName = 'is-image-uploading';

  if (uploadingImage) {
    document.body.classList.add(uploadClassName);
  } else {
    document.body.classList.remove(uploadClassName);
  }

  // 组件卸载时自动清理类名
  return () => document.body.classList.remove(uploadClassName);
}, [uploadingImage])

const uploadToFirebase = e => {
  e.preventDefault();
  if (image) {
    const storageRef = storage.ref(`${user1}/${tripid}/documents`);
    const imageRef = storageRef.child(image.name);
    
    setUploadingImage(true)
    imageRef.put(image)
      .then((url) => {
        alert("Successfully uploaded.");
        getFromFirebase();
        setUploadingImage(false)
      })
      .catch(e => setUploadingImage(false));
  } else {
    alert("Please upload an image first.");
  }
};

配套样式参考 #

你可以直接在全局CSS里针对这个类名写上传状态的样式：

body.is-image-uploading {
  cursor: progress;
  /* 可自行扩展其他样式，比如禁止页面滚动、加全局上传提示遮罩等 */
}

注意事项 #

• 不要直接在上传函数的then/catch里手动操作classList，后续如果新增上传中断、取消等逻辑，很容易漏写类名移除的代码，用useEffect监听状态的方式更稳妥
• 如果需要同时挂载多个类名，直接给classList.add/classList.remove传多个类名参数即可

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