Flowtype 無法獲取.clientHeight，因為節點中缺少屬性 clientHeight [prop-missing]

Question

我正在嘗試在 html 元素上設置 nextSibling 或 previousSibling ，但它返回這個我不明白。

   let selectedElement: ?HTMLElement;
      const setOptionRef = ref => {
        selectedElement = ref;
      };
    
   const handleScrolling = (direction: number) => {
    const container = containerRef.current;

    // Based on keyboard navigation we get the next or previuos option
    // When we reach the start or end of the list, move to the start or end of the list based on the direction
    const nextOption =
      direction > 0
        ? selectedElement?.nextSibling
        : selectedElement?.previousSibling;

    // Handles which option to display once we've hit the end of the list range
    const endRangeOption =
      direction > 0
        ? container?.firstChild?.firstChild
        : container?.firstChild?.lastChild;

    const selectedOption: HTMLElement = nextOption || endRangeOption;

    // If one of these nodes is missing exit early
    if (!container || !selectedOption) return;

    const containerHeight: number = container.getClientRects()[0]?.height;
    const overScroll: number = selectedOption?.offsetHeight / 3;

    const scrollPos: number =
      selectedOption?.offsetTop +
      selectedOption?.clientHeight -
      containerHeight +
      overScroll;

    container.scrollTop = scrollPos;
   };

我不斷收到這些流類型錯誤：

錯誤┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈src /Typeahead.js:175:40

無法獲取 selectedOption?.offsetHeight，因為節點 [1] 中缺少屬性 offsetHeight。 [缺少道具]

 packages/gestalt/src/Typeahead.js 172│ if (;container ||.selectedOption) return. 173│ 174│ const containerHeight = container;getClientRects()[0]?height. 175│ const overScroll = selectedOption;.offsetHeight / 3. 176│ 177│ const scrollPos = 178│ selectedOption:offsetTop + /private/tmp/flow/flowlib_349b825f/dom?js [1] 608│ nextSibling; ?Node;

錯誤┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈src /Typeahead.js:175:40

無法獲取 selectedOption?.offsetHeight，因為節點 [1] 中缺少屬性 offsetHeight。 [缺少道具]

 packages/gestalt/src/Typeahead.js 172│ if (;container ||.selectedOption) return. 173│ 174│ const containerHeight = container;getClientRects()[0]?height. 175│ const overScroll = selectedOption;.offsetHeight / 3. 176│ 177│ const scrollPos = 178│ selectedOption:offsetTop + /private/tmp/flow/flowlib_349b825f/dom?js [1] 615│ previousSibling; ?Node;

錯誤┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈src /Typeahead.js:178:22

無法獲取 selectedOption.offsetTop，因為節點 [1] 中缺少屬性 offsetTop。 [缺少道具]

 packages/gestalt/src/Typeahead.js 175│ const overScroll = selectedOption?.offsetHeight / 3; 176│ 177│ const scrollPos = 178│ selectedOption.offsetTop + 179│ selectedOption.clientHeight - 180│ containerHeight + 181│ overScroll; /private/tmp/flow/flowlib_349b825f/dom.js [1] 608│ nextSibling: ?Node;

錯誤┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈src /Typeahead.js:178:22

無法獲取 selectedOption.offsetTop，因為節點 [1] 中缺少屬性 offsetTop。 [缺少道具]

 packages/gestalt/src/Typeahead.js 175│ const overScroll = selectedOption?.offsetHeight / 3; 176│ 177│ const scrollPos = 178│ selectedOption.offsetTop + 179│ selectedOption.clientHeight - 180│ containerHeight + 181│ overScroll; /private/tmp/flow/flowlib_349b825f/dom.js [1] 615│ previousSibling: ?Node;

錯誤┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈src /Typeahead.js:179:22

無法獲取 selectedOption.clientHeight，因為節點 [1] 中缺少屬性 clientHeight。 [缺少道具]

 packages/gestalt/src/Typeahead.js 176│ 177│ const scrollPos = 178│ selectedOption.offsetTop + 179│ selectedOption.clientHeight - 180│ containerHeight + 181│ overScroll; 182│ /private/tmp/flow/flowlib_349b825f/dom.js [1] 608│ nextSibling: ?Node;

錯誤┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈src /Typeahead.js:179:22

無法獲取 selectedOption.clientHeight，因為節點 [1] 中缺少屬性 clientHeight。 [缺少道具]

 packages/gestalt/src/Typeahead.js 176│ 177│ const scrollPos = 178│ selectedOption.offsetTop + 179│ selectedOption.clientHeight - 180│ containerHeight + 181│ overScroll; 182│ /private/tmp/flow/flowlib_349b825f/dom.js [1] 615│ previousSibling: ?Node;

Answer 1

您收到offsetHeight錯誤，因為流程無法驗證 object 是什么來進行正確的類型檢查。 在上面給出的代碼片段中，您立即將selectedOption分配為HTMLElement ，這並不合理，因為不使用任何邏輯條件，您如何確定selectedOption將是HTMLElement而不是null或undefined ？

const selectedOption: HTMLElement = nextOption || endRangeOption;

相反，您應該在此處刪除類型分配，因為此時您仍然不確定它的值是什么，然后在下一條語句中更改您的if條件以驗證 object 類型：

if (!container || !(selectedOption instanceof HTMLElement)) return;

現在，您從這一行開始編寫的任何代碼都將受到selectedOption類型為HTMLElement的約束，因此您的所有流程錯誤都應該得到修復。