这是我的代码：
export const StyledCard = (props: CardProps) => {
const [loaded, setLoaded] = React.useState<boolean>(false);
return (
<StyledContainer>
{<StyledImage onLoad={() => setLoaded(true)} src={props.imageURL} alt=""/>}
{!customImageLoaded && <ComponentWhichIsNotAnImageAndCannotBeUsedAsFallbackSource />}
</StyledContainer>
)
}我有一个状态，这样占位符组件在图像没有加载时呈现。然而，当图像最终加载时，有一个短暂的瞬间，图像和占位符组件都呈现，这使得容器在最终删除占位符组件之前高度增加了一倍。
有什么办法可以防止这种短暂的双重渲染吗？
如果我设置条件{loaded && <img onLoad={() => setLoaded(true)} src={props.imageURL} alt=""/>}，则只有占位符呈现，img永远不会加载，因为onLoad永远不会触发loaded为false。
另外注意：占位符组件不是图像，所以我不能使用后备源。
有什么办法可以优化这一点并防止双重渲染/延迟问题吗？
1条答案
按热度按时间zvokhttg1#
我假设你可以使用样式隐藏图像。在这种情况下，图像将被加载，然后你将删除隐藏的属性。