Sortie inattendue des fonctions à l'intérieur des composants React

Question

J'ai importé les deux images ( IMG 和 IMG2 ）。 IMG 假设在视口宽度小于 600px 时显示，而如果视口宽度大于或等于 600px，则显示另一张。所以我添加了一个函数来检查视口宽度，然后它返回这两个图像之一，但问题是它只返回我放入函数中的第一个图像，即 IMG . Même si la largeur de la fenêtre d'affichage devient supérieure à 600 px, elle affiche toujours IMG au lieu de IMG2. Remarque : Je peux résoudre ce problème en utilisant simplement des requêtes multimédias et en définissant l'affichage sur Aucun, mais je souhaite savoir comment résoudre ce problème en utilisant React

.

Lien vers tout mon code dans 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

Pour ce faire avec React, vous devez joindre à l'événement de redimensionnement du document.

Vous trouverez ci-dessous un exemple simple de modification de la couleur du texte et de l'arrière-plan lors du redimensionnement.

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();

sssccc
sssccc