Реагируйте: установите ширину div, чтобы быть шириной изображения

Question

Я хочу, чтобы ширина моего div была такой же ширины, как мое изображение.Это включает в себя изменение размера окна и автоматическое изменение размера изображения.В настоящее время я пытался использовать useState, но он не отвечает при изменении размера.

    const basicInfoImage = useRef();
    const basicInfoText = useRef();
    const [basicInfoImageWidth, setBasicInfoImageWidth] = useState();

    useEffect(() => {
        setBasicInfoImageWidth(
            basicInfoImage.current.getBoundingClientRect().width
        );
    });

      <img
        src={profilePic}
        alt="Profile Pic"
        className="About-basic-info-image"
        ref={basicInfoImage}
      />
      <p
        className="About-basic-info-text"
        ref={basicInfoText}
        style={{ width: basicInfoImageWidth }}
      >
        {basicInfoTextContent}
      </p>

Answer 1

То, как вы используете useEffect, сейчас будет работать только один раз, когда компонент монтируется.Вам нужно добавить прослушиватель события в событие resize и затем вызвать setBasicInfoImageWidth

useEffect(() => {
    window.addEventListener('resize', () => setBasicInfoImageWidth(
        basicInfoImage.current.getBoundingClientRect().width
    ));
});

Вероятно, было бы проще решить это с помощью CSS, хотя без рабочего примера было бы труднодать вам рабочий фрагмент.Если вы добавите ссылку jsfiddle, я буду рад помочь вам с CSS

Answer 2

Вы можете сделать это с помощью CSS, не нужно использовать реакцию State