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

您可以使用CSS进行操作，无需使用react State

Answer 2

您现在使用useEffect的方式仅会在组件装入时运行一次。您必须将事件侦听器添加到resize事件中，然后调用setBasicInfoImageWidth

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

使用CSS解决此问题可能会更简单，但是如果没有有效的示例，很难为您提供有效的代码段。如果您添加jsfiddle链接，我们将很乐意为您提供CSS

React：将div的宽度设置为图像的宽度

2 个答案: