有没有办法强制盖茨比图像在imgStyle更改时重新渲染？

Question

我制作了一副牌，其中一张牌是"当前选中的";剩下的卡片的图像被模糊了。我使用"disabled"实现这一点。prop传递给我的项目卡组件，下面的条件样式传递给我的GatsbyImage:

let blurAmount = disabled ? '3px' : '0px';
const imgStyle = { 
imagePosition: "center",
borderRadius: "2%",
filter: `blur(${blurAmount})`
}
const staticImage = (
<GatsbyImage
image={data.preview[0].gatsbyImageData}
alt={data.preview[0].description}
imgStyle={imgStyle}/>
)

当前卡"State在父组件中受到控制，父组件循环遍历查询的数据并创建卡片组。在第一次渲染时，它像预期的那样工作，但是当我用toggle组件更改当前索引时，模糊的图像仍然模糊，而清晰的图像仍然清晰。我记录了上面的blurAmount的值，它适当地改变了。这让我相信，一旦GatsbyImage组件是从一些gatsbyImageData创建的，它是"不可变的"。这种理解是否正确，是否有解决方法(除了在我的CMS中存储模糊图像)。

这是错误的图片。目前的卡片是第二张，但仍然是模糊的，第一张卡片的图像仍然清晰。https://i.stack.imgur.com/3qdV1.jpg

Answer 1

我建议你重做组件并将blurAmount作为道具传递，并使用useState来存储值，然后使用useEffect钩子在每次值更改时重新渲染

useEffect(() => {
// save in state
}, [blurAmount]);