Unerwartete Ausgabe von Funktionen innerhalb von React-Komponenten

Question

Ich habe beide Bilder importiert ( IMG 和 IMG2 ）。 IMG 假设在视口宽度小于 600px 时显示，而如果视口宽度大于或等于 600px，则显示另一张。所以我添加了一个函数来检查视口宽度，然后它返回这两个图像之一，但问题是它只返回我放入函数中的第一个图像，即 IMG . Auch wenn die Breite des Ansichtsfensters größer als 600 Pixel wird, wird immer noch IMG anstelle von IMG2 angezeigt. Hinweis: Ich kann dieses Problem lösen, indem ich einfach Medienabfragen verwende und die Anzeige auf „Keine“ setze, aber ich möchte wissen, wie man dieses Problem mit React löst

.

Link zu meinem gesamten Code in Github: https://github.com/Issamath/PerfumeProduct.com

import IMG from '../../assets/image-product-mobile.jpg'
import IMG2 from '../../assets/image-product-desktop.jpg'

const ProductImage = () => {
  function displayImage(){
    let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
    console.log(vw);
    if(vw < 600) {
     console.log(vw + "is smaller than 600");
     return (<img src={IMG} alt="" />);
    } else {
     console.log(vw + "is bigger than 600");
     return (<img src={IMG2} alt="" />);
    }
}
  return (
    <div className='container-img'>
      {displayImage()}
    </div>
  )
}

export default ProductImage

.container-img img {
    height: 15rem;
    width: 100%;
    background: white;
    border-radius: 0.8rem 0.8rem 0 0;
}

.container-img {
   
}

 /* -----------------for bigger phones------------------- */

@media screen and (min-width: 390px) {
    .container-img img {
        height: 20rem;
    }
}

Answer 1

要使用 React 执行此操作，您需要附加到文档调整大小事件。

下面是一个简单的示例，在调整大小时更改文本和背景颜色。

const {useEffect, useState} = React;

const getWidth = () => document.documentElement.clientWidth;

const ResizeCheck = () => {
  const [width, setWidth] = useState(getWidth());
  useEffect(() => {
    const resize = () => setWidth(getWidth());
    window.addEventListener('resize', resize);
    return () => window.removeEventListener('resize', resize);
  }, []);
  return 
{
    width >= 600 
      ? 
Greater than equal to 600
      : 
Less than 600
    }
  
;
}

const root = ReactDOM.createRoot(document.querySelector('#mount'));
root.render();