Reactjs 反应：根据屏幕位置更改元素类别

我有一个反应成分。它渲染一行图像。如果图片显示在图片的左侧，则将鼠标悬停在更大的预览上。但是现在我想把预览放在右边，如果原始图片在窗口的左边。我目前的实施非常缓慢

import React from 'react';
import { calculateDimensions, calculateTimeDifference, postData } from '../Tools';
import { CONST } from '../config';

export class Picture extends React.Component {

    constructor(props) {
    super(props);
    this.state = {
      bookmark: this.props.picture.bookmark,
      stars: parseInt(this.props.picture.stars),
      showPreview: false,
    };

    this.url = CONST.URL_RESTSERVICE + '/picture/update.php';
  }

  componentDidMount() {
    this.setPictureClass();
  }

  componentDidUpdate() {
    this.setPictureClass();
  }

  setPictureClass() {
    // set class to all pictues so they wil get alignet properly
    let pic = document.getElementById('pic' + this.props.picture.id);
      const offsetLeft = pic.getBoundingClientRect().left;
      const width  = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      pic.classList.remove("tooltipPicRight");
      pic.classList.remove("tooltipPicLeft");
      if (width / 2 < offsetLeft ) {
        pic.classList.add("tooltipPicRight");
      } else {
        pic.classList.add("tooltipPicLeft");
      }
  }

  render() {
    const pic = this.props.picture;
    const stars = parseInt(this.state.stars);
    calculateDimensions(pic);
    let timeDiffernce = null;
    if (pic.date && pic.previousDate) {
      timeDiffernce = calculateTimeDifference(pic.date, pic.previousDate);
    }

    // const inputRef = useRef();

    return (
    <div className="inline-block align-center picture">
      <div className="block tooltipPic" id={'pic' + pic.id}>
        {
        this.props.handleClickPicturePreview ?
        <img onClick={() => this.props.handleClickPicturePreview(pic)} src={pic.picLocation} width={pic.width ? calculateDimensions(pic).width : 0} height={pic.height ? calculateDimensions(pic).height : 0} loading="lazy" alt={pic.id} />
        : <a href={pic.picLocation} target="_blank" rel="noopener noreferrer"><img src={pic.picLocation} width={pic.width ? calculateDimensions(pic).width : 0} height={pic.height ? calculateDimensions(pic).height : 0} loading="lazy" alt={pic.id} className=""/></a>
        }
        <span className="tooltiptextPic"><img src={pic.picLocation} width={pic.width ? calculateDimensions(pic, 600, 600).width : 0} height={pic.height ? calculateDimensions(pic, 600, 600).height : 0} loading="lazy" alt={pic.id} /></span>
      </div>
    </div>);
  }
}

从“React”导入React；
从“../Tools”导入{calculateDimensions，CalculateMediaDifference，postData}；
从“../config”导入{CONST}；
导出类Picture.Component{
建造师（道具）{
超级（道具）；
此.state={
书签：this.props.picture.bookmark，
星星：parseInt（this.props.picture.stars），
showPreview:false，
};
this.url=CONST.url_RESTSERVICE+'/picture/update.php'；
}
componentDidMount（）{
这个.setPictureClass（）；
}
componentDidUpdate（）{
这个.setPictureClass（）；
}
setPictureClass（）{
//将类设置为所有图片，以便它们正确对齐
设pic=document.getElementById（'pic'+this.props.picture.id）；
const offsetLeft=pic.getBoundingClientRect（）.left；
常量宽度=window.innerWidth | | document.documentElement.clientWidth | | document.body.clientWidth；
pic.classList.remove（“工具提示灯”）；
pic.classList.remove（“tooltipicleft”）；
如果（宽度/2<偏移左侧）{
pic.classList.add（“工具提示灯”）；
}否则{
pic.classList.add（“工具提示”）；
}
}
render（）{
const pic=this.props.picture；
const stars=parseInt（this.state.stars）；
计算尺寸（pic）；
设timeDiffernce=null；
如果（图片日期和图片先前日期）{
时间差=计算中间差（pic.date，pic.previousDate）；
}
//const inputRef=useRef（）；
返回(
{
这个.props.handleClickPicturePreview？
: 
}
);
}
}

您可以使用

元素.getBoundingClientRect（）

，它会让您知道图像（或元素）在屏幕中的显示位置，因此您可以设置一个if，如果它离左边缘太近，则将其发送到另一侧：

我要做的是创建一个css类，将图像推送到我希望它出现的地方

   .push-image{
    // Some style
    margin-left: 99px; //Whathever you need
    }

然后计算将渲染图像的位置

componentDidMount(){
// Find the element already rendered
const divToCheck =  document.getElementById({'pic' + pic.id});

// Get the position
let bounding = divToCheck.getBoundingClientRect();

// Log the results
console.log(bounding);
// {
//  height: 118,
//  width: 591.359375,
//  top: 137,
//  bottom: 255,
//  left: 40.3125,
//  right: 631.671875
// }

// set state so the render has access
this.setState({
boundingPositionX: bounding.left,
})

}

最后，以友好的方式设置类

render(){
let classToPush;
this.state.boundingPositionX < 99 ? classToPush = "push-image" : classToPush = "";
}

render（）{
让我们一起来吧；
this.state.boundingPositionX<99？classToPush=“推送图像”：classToPush=“”；
}

---

如果一切正常，您应该能够将元素向右推

尝试使用web API检查是否根据用户事件对dom进行了更改。谢谢，它起到了作用，但当窗口调整大小时，元素不会更新。你知道怎么解决吗？你只是调整了尺寸吗？还是你也刷新了页面？如果您没有刷新它，那么边界将保存组件装入时收到的值，如果您刷新它，那么它还应该刷新值当然刷新页面不是一个好的解决方案。