Question

我有一些包含图像的React组件，它们的高度根据图像加载而变化（即）。

组件都已添加到网格中，但是我不希望将它们添加到网格中，直到图像加载完毕为止。

我尝试过这样的事情：

class CardInstance {
    Card: JSX.Element;
    Id: number;
    loaded: boolean = false;
};

cards: CardInstance[] = [];

getCard(src: CardData): CardInstance
{
    for (var i = 0; i < this.cards.length; i++)
    {
        var subCard = this.cards[i].Card;
        if (this.cards[i].Id == src.id)
            return this.cards[i];
    }

    var card = new CardInstance();
    card.Id = src.id;
    card.Card = <div key={src.id}><Card imageLoaded={this.imageLoaded} width={this.props.columnwidth} src={src} /></div>;
    this.cards.push(card);

    return card;
}

imageLoaded(cardId: number)
{
// get card instance using card id..
cardInstance.Loaded = true;
}

在渲染功能中，我基本上称之为“getCard＆＃39;对于我的道具中的每个CardData（上面代码中没有显示），从返回的CardInstance中检查布尔值＆＃39; loading＆＃39;如果是，我将它添加到数组中进行渲染。

^上面显然没有工作，因为元素没有被挂载，因此不会渲染或尝试加载图像和imageLoaded回调（通过onLoaded连接到img元素）卡）无法创建或加载。

使用我的方法或其他方法可以吗？

在图像加载之前不要渲染组件？

0 个答案: