javascript - 只有在满足特定条件后才在React中返回？

我正在使用SlateJS，我需要延迟<img src={imgSrc} />的返回，直到imgSrc是定义的值（它已从blob作为DataURL读取）

有什么办法吗？

我知道这是行不通的（这是不明智的），但是从理论上讲，我可以这样做：

return setTimeout(function() {return <img src={imgSrc} />, 1000)

最佳答案

如果要在定义图像值后立即渲染图像，请尝试以下操作：

方法1：使用像imgSrc这样的高阶函数，就像<ImageComponent imgSrc={} />

const ImageComponent = ({ imgSrc }) => {
    if (!imgSrc) {
        return <span></span>
    } else {
        return <img src={imgSrc} />
    }
}

方法2：在运行return语句的位置处呈现一些内联代码。

{ this.props.imgSrc && <img src={imgSrc} />}

上面的代码很酷，如果定义了imgSrc属性，它的工作就是渲染img元素，否则它什么也不做。它是反应性的，因此当imgSrc更改时，元素将重新呈现。

希望能有所帮助。