Javascript 为什么在使用useRef时仍然使用旧引用？

我试图做的是呈现一个从数组迭代的

img

元素列表，它们有一个名为

photoRef

的引用到它们的容器div。现在，每个图像都有一个删除选项，可以启动

handleRemovePhoto

功能。在这个函数中，我调用我的函数

slideAndFade

，在

photoRef.current

上生成一个简单的动画。1000毫秒后，该函数将发送一个操作以从状态中删除照片。随着状态更新，照片列表将重新渲染

现在我似乎不明白的问题是，为什么

photoRef

仍然带有相同的变换和不透明度样式，我将其应用于photoRef引用的div，该div现在被删除，并且没有被渲染。旧引用不应该与元素本身一起消亡吗？但情况似乎并非如此。有人能解释为什么会这样吗

我的图像组件

//动画产生函数
功能幻灯片ADFADE（照片）{
photo.style.transition=“transfrom 2s ease，opacity 2s ease”；
photo.style.transform=“translateX（20px）”；
photo.style.opacity=“0”；
}
//图像组件
导出默认功能图像（道具）{
const dispatch=usedpatch（）；
const photoRef=useRef（）；
const handleRemovePhoto=（）=>{
slideAndFade（光频电流）；
setTimeout（（）=>dispatch（removePhoto（props.index）），1000；
};
返回(
删除
);
}

编辑 我试图避免使用

useRef

，因为这似乎是问题的原因。因此，我们尝试了以下方法：

export default function Image(props) {
  const dispatch = useDispatch();
  const deletedStyle = {
      transform: "translateX(20px)",
      opacity: 0,
  };
  const [isDeleted, setIsDeleted] = useState(false);
  const handleRemovePhoto = () => {
    setIsDeleted(true);
    setTimeout(() => dispatch(removePhoto(props.index)), 1000);
  };

  return (
    <>
        <div ref={photoRef} className={classes.previewContainer}>
          <img
            src={props.src}
            style={isDeleted? isDeletedStyle : {}}
          />
          <button onClick={handleRemovePhoto}>Delete</button>
        </div>
    </>
  );
}

导出默认功能图像（道具）{
const dispatch=usedpatch（）；
常量删除样式={
转换：“translateX（20px）”，
不透明度：0，
};
常量[isDeleted，setIsDeleted]=useState（false）；
const handleRemovePhoto=（）=>{
setIsDeleted（true）；
setTimeout（（）=>dispatch（removePhoto（props.index）），1000；
};
返回(
删除
);
}

还是不行。还是一样。我开始认为改变风格不是问题

旧引用不应该与元素本身一起消亡吗

否，React将元素重用为的一部分。只要React知道您配置元素的每一种方式，这就可以正常工作，但如果您自己修改元素的内联样式而不让React知道，则无法正常工作，就像您在这里所做的那样

使用React配置内联样式的正确方法是在JSX中设置

style

属性：

返回(
删除
);

---

正如FAQ条目所讨论的，在可能的情况下最好使用CSS类。

嘿，它不起作用。看看我在帖子中所做的编辑，你能解释一下“没用”、“还是一样”是什么意思吗？最初的问题是用useRef（）来描述的，所以当您删除useRef（）时，有点不清楚什么不起作用。你希望看到什么？你看到了什么？照片仍然有被删除的样式吗？看起来您从未将

isDeleted

设置回

false

是的，问题恰恰在于此。我将尝试将

isDeleted

设置为false，但假设它能工作，为什么它能工作呢。我正在从渲染中删除整个组件，但新组件的样式似乎与我在删除的组件中设置的样式相同。