React，通过添加与状态相关的类来有条件地设置正文样式

Question

我有以下内容，我试图在上传图片时更改正文样式（因此用户知道它正在上传）。 如何在图像上传时将类附加到正文，然后在图像上传后将其删除？

const [uploadingImage, setUploadingImage] = useState(false)

    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.");
        }
      };

Answer 1

您可以使用useEffect ，如下所示：

useEffect(()=>{
  document.body.classList.toggle("image-uploading", uploadingImage);
},[uploadingImage])

然后在你的css中添加这个：

body.image-uploading{
  /* whatever style you want goes here*/
}