Flowtype 无法获取 .clientHeight，因为 属性 Node [prop-missing] 中缺少 clientHeight

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;
   };

我不断收到这些流类型错误：

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/Typeahead.js:175:40

Cannot get selectedOption?.offsetHeight because property offsetHeight is missing in Node [1]. [prop-missing]

 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;

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/Typeahead.js:175:40

Cannot get selectedOption?.offsetHeight because property offsetHeight is missing in Node [1]. [prop-missing]

 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;

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/Typeahead.js:178:22

Cannot get selectedOption.offsetTop because property offsetTop is missing in Node [1]. [prop-missing]

 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;

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/Typeahead.js:178:22

Cannot get selectedOption.offsetTop because property offsetTop is missing in Node [1]. [prop-missing]

 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;

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/Typeahead.js:179:22

Cannot get selectedOption.clientHeight because property clientHeight is missing in Node [1]. [prop-missing]

 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;

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/Typeahead.js:179:22

Cannot get selectedOption.clientHeight because property clientHeight is missing in Node [1]. [prop-missing]

 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 的错误，因为流无法验证对象是什么以进行正确的类型检查。在上面给出的代码片段中，您立即将 selectedOption 分配为 HTMLElement，这并不合理，因为如果不使用任何逻辑条件，您如何确定 selectedOption 将是 HTMLElement 并且不是 null 或 undefined?

const selectedOption: HTMLElement = nextOption || endRangeOption;

相反，您应该删除此处的类型分配，因为此时您仍然不确定它的值是什么，然后在下一条语句中更改您的 if 条件以验证对象类型：

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

现在，您从这一行开始编写的任何代码都将受到 selectedOption 类型 HTMLElement 的约束，因此您的所有流程错误都应该得到修复。