Flow是許多React項(xiàng)目中使用的靜態(tài)類型檢查器，有時(shí)感覺(jué)像是禮物和詛咒。這是一種禮物，它可以識(shí)別代碼中的弱點(diǎn)，還有一個(gè)詛咒，有時(shí)您會(huì)覺(jué)得自己不必要調(diào)整代碼來(lái)滿足Flow。我已經(jīng)變得很欣賞Flow，但這并不意味著我最終要花費(fèi)額外的時(shí)間來(lái)尋找新的編碼方法。

最近，我遇到了一個(gè)問(wèn)題：我在React元素中查詢一個(gè)節(jié)點(diǎn)，然后querySelector 在該節(jié)點(diǎn)上使用它來(lái)找到一個(gè)子節(jié)點(diǎn)。令人驚訝的是Flow出現(xiàn)了問(wèn)題：

無(wú)法調(diào)用節(jié)點(diǎn)。querySelector因?yàn)樨?cái)產(chǎn)querySelector的未知

const { maxHeight } = this.state; const node = ReactDOM.findDOMNode(this);   if (node && node.querySelector) {      const popupNode = node.querySelector(".preview-popup");   if (popupNode) {      popupNode.style.maxHeight = `${maxHeight}px`; } /private/tmp/flow/flowlib_34a4c903/react-dom.js [1] 14│ ): null | Element | Text;

找到1個(gè)錯(cuò)誤

事實(shí)證明findDOMNode 可以返回類型 Text，因此querySelectorAll 可以u(píng)ndefined; 流不喜歡undefined。解決的辦法是使用instanceOf  具有HTMLElement：

if (node instanceOf HTMLElement) {     // ... }

解決方案是合理的，但我的一部分默默地冒充&& node.querySelector 不合格。最后，F(xiàn)low非常有用，以至于像這樣的微小變化都不會(huì)使我感到困惑。