reactjs - 带有 imagesLoaded 的砌体布局

Question

我创建了一个包含一些图像或文本的砌体网格。我使用 masonry.desandro 作为砌体网格。到目前为止，我为这些项目设置了固定高度。例如带有文本的项目：200 像素和带有图像的项目：300 像素。

但我想删除这些固定高度。对于只有文本的项目，砌体网格仍然可以正常工作。但我对包含图像的项目有疑问。带有图像的项目重叠。我在 masonry 的网站上看到，我必须在加载图像后使用 imagesLoaded 来初始化网格。

  // Initialize masonry-layout
  initMasonry() {
    this.masonry = new Masonry('.container', {
      itemSelector: '.item',
      columnWidth: '.item',
    });
  }

  getPosts() {
        API call (get text and images for the items)
        ...
        ...
       let grid = document.querySelector('.container');
       imagesLoaded( grid ).on( 'progress', function() {
          // layout Masonry after each image was loaded
          this.masonry.reloadItems();
          this.masonry.layout();
       });
  }
  componentDidMount() {
    // Show the loading screen
    this.props.isLoading(true);
    // Fetch posts from API
    this.getPosts();
    this.initMasonry();
  }

我已将 imagesLoaded 添加到函数 getPosts() 中。但现在我收到一条错误消息： TypeError: Cannot read property 'reloadItems' of undefined

谢谢你的帮助：）！