Fluxo, o verificador de tipos estáticos usado em muitos projetos React, às vezes parece uma dádiva e uma maldição; uma dádiva porque identifica os pontos fracos do código e uma maldição porque, às vezes, você sente que está ajustando desnecessariamente o código para satisfazer o Flow. Passei a apreciar o Flow, mas isso não significa que eu acabe gastando horas extras para encontrar novas maneiras de codificar.
Recentemente, encontrei um problema em que eu estava consultando um nó em um elemento React e, em seguida, usando querySelector nesse nó para encontrar um filho; surpreendentemente, o Flow teve um problema:
Cannot call node.querySelector because property querySelector of unknown
type [1] is not a function.
71│ const { maxHeight } = this.state;
72│ const node = ReactDOM.findDOMNode(this);
[1] 73│ if (node && node.querySelector) {
74│ const popupNode = node.querySelector(".preview-popup");
75│ if (popupNode) {
76│ popupNode.style.maxHeight = `${maxHeight}px`;
77│ }
/private/tmp/flow/flowlib_34a4c903/react-dom.js
[1] 14│ ): null | Element | Text;
Found 1 error
Acontece que findDOMNode pode retornar o tipo Texte, portanto querySelectorAll seria undefined; Flow não gosta de undefined. A solução é usar instanceOf com HTMLElement:
if (node instanceOf HTMLElement) {
// ...
}
A solução faz sentido, mas uma parte de mim se enfurece silenciosamente com o fato de que o && node.querySelector não se qualifica. No final das contas, o Flow é tão útil que pequenas mudanças como essa não me irritam muito.
