React - 如何强制onLoad调用图像

Question

我正在编写一个React组件，并且无法绕过缓存获取映像重新加载。我已经用Google搜索了其他解决方案，并且知道如果我在onLoad属性之前将src属性引出它“应该”工作但它似乎没有这样做。

这是我的代码：

export class ImageComponent extends React.Component {
    render() {
        return (
             <div>
                 <img 
                     onLoad={() => this.props.calculateImageMargin(this.imageRef)}
                     src={"./myImage.jpg"}
                     ref={(ref) => this.imageRef = ref}
                     onClick={() => this.props.openFullScreen()}
                 />
             </div>
        );
    }
}

这个图像以这种方式使用：我可以点击图像，将其打开到一个完整的屏幕，然后我可以旋转它。保存这些更改后，缩略图图像应显示处于旋转状态。但是，当我手动刷新页面时调用calculateImageMargin，但在保存旋转的图像时不调用onLoad。在这种情况下，如何让图像调用onLoad？我曾尝试在src之前移动onLoad，但这似乎不起作用。

编辑

我已将componentDidMount回调移至

export class ImageComponent extends React.Component {
    constructor() {
        super();
        this.imageRef = null;
    }

    componentDidMount() {
        this.props.calculateImageMargin(this.imageRef);
    }

    render() {
        return (
             <div>
                 <img 
                     src={"./myImage.jpg"}
                     ref={(ref) => this.imageRef = ref}
                     onClick={() => this.props.openFullScreen()}
                 />
             </div>
        );
    }
}

。

imageRef

当我设置一些控制台日志时，看起来img首先由componentDidMount标签设置，然后img激活。但是，正确的图像高度和宽度似乎没有恰当地通过。另外，我不确定这个解决方案是否会在我的calculateImageMargin函数中修改后适当设置calculateImageMargin边距。

我也尝试将render()函数放在undefined体中，但得到imageRef错误，因为onLoad没有设置在那一点。

Answer 1

这里没有足够的代码，或者这是按预期工作的。图像未重新加载。它正在被轮换。您可能需要的是将ImageMargin回调移动到渲染方法的主体，以便在旋转组件并重新渲染时，重新计算qazxswpoi。