javascript - 在第一次渲染期间从响应式 React 元素获取宽度？

Question

我有一个名为 ResultList 的 React 组件，负责在图库中显示产品。

但是为了选择每行正确的产品数量，我需要知道我的组件还剩下多少像素，因为还有一些其他逻辑可以确定侧栏和过滤栏是否会与是否ResultList。因此，ResultList 的宽度是响应式的并且会变化。

我已经构建了这段代码来获取元素的宽度，但现在它不适用于第一次渲染。我不知道这是否可行，因为该元素尚未创建，并且 ref 尚未分配给任何内容。但是，如果我无法知道元素的宽度，如何选择在第一次渲染时显示多少产品？

参见下面的 GIF:

我的ResultList将是Item2

问题

如何在第一次渲染期间获取 Item2 的宽度，如果不可能，如何隐藏它，直到我知道它的可用宽度是多少？有没有比使用 window.getCompulatedStyle 更好的方法来获取响应式元素的宽度？

CodeSandbox 链接:

https://codesandbox.io/s/wizardly-blackburn-f1p7j

完整代码:

import React, { useRef, useState } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

const S = {};

S.Container_DIV = styled.div`
  display: flex;
  height: 150px;
`;

S.FlexItem1 = styled.div`
  flex: 0 0 200px;
  background-color: lightblue;
`;

S.FlexItem2 = styled.div`
  flex: 1 1 80%;
  background-color: lightcoral;
`;

S.FlexItem3 = styled.div`
  flex: 0 0 160px;
  background-color: lightgreen;
`;

function App() {
  const itemRef = useRef(null);
  const [boolean, setBoolean] = useState(false);
  return (
    <React.Fragment>
      <S.Container_DIV>
        <S.FlexItem1>Item 1</S.FlexItem1>
        <S.FlexItem2 ref={itemRef}>Item 2</S.FlexItem2>
        <S.FlexItem3>Item 3</S.FlexItem3>
      </S.Container_DIV>
      <div>
        <br />
        Item2 width is:{" "}
        {itemRef.current && window.getComputedStyle(itemRef.current).width}
      </div>
      <div>
        <button onClick={() => setBoolean(prevState => !prevState)}>
          Force Update
        </button>
      </div>
    </React.Fragment>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

要等到元素渲染完毕并且 ref 具有值，您需要使用效果。 useEffect 是可行的，但在重新计算之前您会看到它渲染一次闪烁。相反，在这种情况下 useLayoutEffect可以使用。它将渲染一次，然后您进行测量并设置状态，然后它将再次同步渲染，因此不应看到闪烁。

function App() {
  const itemRef = useRef(null);
  const [itemWidth, setItemWidth] = useState(-1);
  const [boolean, setBoolean] = useState(false);
  useLayoutEffect(() => {
   // I don't think it can be null at this point, but better safe than sorry
    if (itemRef.current) {
       setItemWidth(window.getComputedStyle(itemRef.current).width);
    }
  });
  return (
    <React.Fragment>
      <S.Container_DIV>
        <S.FlexItem1>Item 1</S.FlexItem1>
        <S.FlexItem2 ref={itemRef}>Item 2</S.FlexItem2>
        <S.FlexItem3>Item 3</S.FlexItem3>
      </S.Container_DIV>
      <div>
        <br />
        Item2 width is: {itemWidth}
      </div>
      <div>
        <button onClick={() => setBoolean(prevState => !prevState)}>
          Force Update
        </button>
      </div>
    </React.Fragment>
  );
}

---