Javascript React砌体布局在渲染具有淡入效果的图像时存在错误

代码如下：

您可以尝试演示：

每幅图片都是一个

放大装置

组件，当你点击它时，它会放大。它们被设计成通过淡入顺序显示。我使用

Ref

跟踪每个

放大器

，下面是它的代码片段

import Img from "react-image-enlarger"

class Enlarger extends React.Component {
  state = { zoomed: false, opacity: 0 }

  toggleOpacity = o => {
    this.setState({ opacity: o })
  }

  render() {
    const { index, orderIndex, src, enlargedSrc, onLoad } = this.props
    return (
      <div style={{ margin: "0.25rem" }} onLoad={onLoad}>
        <Img
          style={{
            opacity: this.state.opacity,
            transition: "opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94)",
            transitionDelay: `${orderIndex * 0.07}s`,
          }}
          zoomed={this.state.zoomed}
          src={src}
          enlargedSrc={enlargedSrc}
          onClick={() => {
            this.setState({ zoomed: true })
          }}
          onRequestClose={() => {
            this.setState({ zoomed: false })
          }}
        />
      </div>
    )
  }
}

export default Enlarger

从“react图像放大器”导入Img
类放大器扩展React.Component{
状态={缩放：false，不透明度：0}
toggleOpacity=o=>{
this.setState（{opacity:o}）
}
render（）{
const{index，orderIndex，src，enlargedSrc，onLoad}=this.props
返回(
{
this.setState（{zoomed:true}）
}}
onRequestClose={（）=>{
this.setState（{zoomed:false}）
}}
/>
)
}
}
导出默认放大器

我有一个砖石构件，它将实现砖石布局

import React, { Component } from "react"
import imagesLoaded from "imagesloaded"
import PropTypes from "prop-types"
import TransitionGroup from "react-transition-group/TransitionGroup"

class MasonryGrid extends Component {
  componentDidMount() {
    window.onload = this.resizeAllGridItems()
    window.addEventListener("resize", this.resizeAllGridItems)

    let allItems = document.getElementsByClassName("masonry-grid--item")
    for (let x = 0; x < allItems.length; x++) {
      imagesLoaded(allItems[x], this.resizeInstance)
    }
  }

  resizeAllGridItems = () => {
    let allItems = document.getElementsByClassName("masonry-grid--item")
    for (let x = 0; x < allItems.length; x++) {
      this.resizeGridItem(allItems[x])
    }
  }

  resizeGridItem = item => {
    let grid = document.getElementsByClassName("masonry-grid")[0]
    let rowHeight = parseInt(
      window.getComputedStyle(grid).getPropertyValue("grid-auto-rows")
    )
    let rowGap = parseInt(
      window.getComputedStyle(grid).getPropertyValue("grid-row-gap")
    )
    let rowSpan = Math.ceil(
      (item.querySelector(".content").getBoundingClientRect().height + rowGap) /
        (rowHeight + rowGap)
    )
    item.style.gridRowEnd = "span " + rowSpan
  }

  resizeInstance = instance => {
    let item = instance.elements[0]
    this.resizeGridItem(item)
  }

  render() {
    const MasonryGrid = {
      display: "grid",
      gridGap: `${this.props.gridGap}`,
      gridTemplateColumns: `repeat(auto-fill, minmax(${
        this.props.itemWidth
      }px, 1fr))`,
      gridAutoRows: "10px",
    }
    return (
      <TransitionGroup>
        <div className="masonry-grid" style={MasonryGrid}>
          {this.props.children.length >= 1 &&
            this.props.children.map((item, index) => {
              return (
                <div className="masonry-grid--item" key={index}>
                  <div className="content">{item}</div>
                </div>
              )
            })}
        </div>
      </TransitionGroup>
    )
  }
}

MasonryGrid.defaultProps = {
  itemWidth: 250,
  gridGap: "6px 10px",
}

MasonryGrid.propTypes = {
  itemWidth: PropTypes.number,
  gridGap: PropTypes.string,
}

export default MasonryGrid

import React，{Component}来自“React”
从“imagesLoaded”导入imagesLoaded
从“道具类型”导入道具类型
从“反应转换组/转换组”导入转换组
类MasonryGrid扩展组件{
componentDidMount（）{
window.onload=this.resizealgridItems（）
window.addEventListener（“resize”，this.resizealGridItems）
让allItems=document.getElementsByClassName（“砌体网格——项目”）
for（设x=0；x{
让allItems=document.getElementsByClassName（“砌体网格——项目”）
for（设x=0；x{
let grid=document.getElementsByClassName（“砌体网格”）[0]
让rowHeight=parseInt(
getComputedStyle（网格）.getPropertyValue（“网格自动行”）
)
设rowGap=parseInt(
getComputedStyle（网格）.getPropertyValue（“网格行间距”）
)
让rowSpan=Math.ceil(
（item.querySelector（“.content”）.getBoundingClientRect（）.height+rowGap）/
（行高+行间距）
)
item.style.gridRowEnd=“span”+行span
}
resizeInstance=实例=>{
let item=instance.elements[0]
此.resizeGridItem（项目）
}
render（）{
常数MasonryGrid={
显示：“网格”，
gridGap:`${this.props.gridGap}`，
gridTemplateColumns:`repeat（自动填充，最小最大值(${
这个.props.itemWidth
}px，1fr），
gridAutoRows：“10px”，
}
返回(
{this.props.children.length>=1&&
this.props.children.map（（项目，索引）=>{
返回(
{item}
)
})}
)
}
}
MasonryGrid.defaultProps={
项目宽度：250，
gridGap：“6px 10px”，
}
MasonryGrid.propTypes={
itemWidth:PropTypes.number，
gridGap:PropTypes.string，
}
导出默认MasonryGrid

---

问题是，如果您查看演示，当您单击tab

project1

时，您将看到图片彼此重叠，并且没有按预期传播但是一旦你稍微调整一下浏览器的大小，它们就会变得正常，形成我想要的砖石布局。我怀疑这与我实施的淡入效应有关，但我不知道如何修复它。

你在回购协议的问题页面上问过这个问题吗？这可能是一个更好的问题。@jmargolisvt哪个回购协议？似乎您在使用react图像放大器时遇到了问题？Fwiw，

getElementsByClassName

不是一种非常“反应”的做事方式。也许按照React的动态编程模型构建代码会使您更容易以更容易调试的方式实现所需的效果。