如何根據 React 中的元素大小計算屬性？

Question

我的頁面上有一張卡片，其標題是用戶名。 名稱有時會比卡片長，之前的溢出是省略號，hover 上出現工具提示以顯示全名。 現在應該以某種方式進行更改，如果它溢出，那么 texts letter-spacing 屬性將一直減小到 -2，之后它將開始真正溢出並帶有省略號。 如何從封閉 div 的可用寬度計算值？ 或者應該如何實施。

當前 state：

對於可以符合字母間距的名稱：-2

對於長名稱：

對於簡稱：

請注意，所有卡片的容器大小都相同！

Answer 1

假設您的卡片組件是這樣的

function Card({ name }) {
  return (
    <div className="card">
      <div className="card__pic"></div>
      <h3 className="card__name" ref={nameRef}>
        {name}
      </h3>
    </div>
  );
}

我們所需要的只是包含名稱的元素，即“card__name”。

1. 訪問“名稱”元素。

要訪問這個名稱元素，我們必須使用useRef鈎子。 以下是您將如何使用它。

function Card({ name }) {
  const nameRef = useRef(null);

  useEffect(() => {
    // nameRef.current is accessible here
  }, []);

  return (
    <div className="card">
      <div className="card__pic"></div>
      <h3 className="card__name" ref={nameRef}>
        {name}
      </h3>
    </div>
  );
}

我們必須將ref={refVariable}傳遞給我們想要訪問的元素。 refVariable將在掛載后使用元素節點進行初始化，即我們可以在useEffect掛鈎中使用它。

2. 確定名稱是否溢出。

現在既然我們有了元素，我們可以用它來檢查里面的文本是否溢出。 我創建了一個 function isTextOverflowingCard ，我們將引用傳遞給我們在安裝后獲得的元素。 如果文本溢出，它將返回 true，否則返回 false。

function isTextOverflowingCard(textElement) {
  if (textElement.scrollWidth > textElement.clientWidth) {
    return true;
  }
  return false;
}

現在在 Card 內部，我們可以使用這個 function 並根據它的返回值，有條件地添加一個 class ，它將具有緊密的字母間距值。

function Card({ name }) {
  const nameRef = useRef(null);
  const [textOverflow, setTextOverflow] = useState(false);

  useEffect(() => {
    // nameRef.current is accessible here
    setTextOverflow(isTextOverflowingCard(nameRef.current));
  }, []);

  return (
    <div className="card">
      <div className="card__pic"></div>
      <h3 className={`card__name ${textOverflow ? 'card__name--tight-kerning' : ''}`} ref={nameRef}>
        {name}
      </h3>
    </div>
  );
}

在 CSS 中，

.card__name--tight-kerning {
  letter-spacing: -2px;
}

可以將useEffect改成useLayoutEffect，這樣更適合這種dom相關的計算並應用於ui。

參考：

1. 檢測文本是否溢出
2. useEffect 與 useLayoutEffect
3. https://reactjs.org/docs/hooks-reference.html#useref