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

【问题标题】：Flowtype Cannot get .clientHeight because property clientHeight is missing in Node [prop-missing]Flowtype无法获取.clientHeight，因为Node中缺少属性clientHeight [prop-missing]
【发布时间】：2020-07-12 07:00:20
【问题描述】：

我正在尝试在 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 因为属性 offsetHeight 节点 [1] 中缺少。 [缺少道具]
 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 因为属性 offsetHeight 节点 [1] 中缺少。 [缺少道具]
 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 因为属性 offsetTop 是在节点 [1] 中丢失。 [缺少道具]
 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 因为属性 offsetTop 是在节点 [1] 中丢失。 [缺少道具]
 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 因为属性 clientHeight 节点 [1] 中缺少。 [缺少道具]
 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 因为属性 clientHeight 节点 [1] 中缺少。 [缺少道具]
 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;

【问题讨论】：

您能否确认selectedElement 具有您期望的任何价值？
确实如此，代码按预期工作
似乎你真的想要带问号的selectedOption: ?HTMLElement，你想要.nextElementSibling 和.firstElementChild 等等。现在你得到的是Node，而不是Element，因为可能有文本节点或cmets。
我遇到了 HTMLElement 和 Element 之间的兼容性问题，它们不被视为同一类型。

标签： javascript reactjs flowtype

【解决方案1】：

您收到offsetHeight 的错误，因为流程无法验证对象是什么来进行正确的类型检查。在上面给出的代码 sn-p 中，您立即将 selectedOption 分配为 HTMLElement，这不合理，因为如果不使用任何逻辑条件，您如何确定 selectedOption 将是 HTMLElement 而不是 null 或 @ 987654327@?

const selectedOption: HTMLElement = nextOption || endRangeOption;

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

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

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

【讨论】：