流 - 缺少类型注释答案

【问题标题】：Flow - missing type annotation流 - 缺少类型注释
【发布时间】：2019-05-14 19:36:18
【问题描述】：

对流很陌生，并试图修复我的代码以包含流。这是我目前的代码，我添加了流类型检查，现在出现错误，所以我需要正确注释我的代码：

// @flow
import React, { Component } from 'react';
import { Manager, Reference, Popper } from 'react-popper';

import cx from 'classnames';
import css from './Tooltip.css';
import animationsCss from './TooltipAnimations.css';

type Props = {
  theme: string,
  eventsEnabled: boolean,
}
class Tooltip extends Component<Props> {
  static defaultProps = {
    theme: 'light',
    eventsEnabled: true
  };

  firstOrderPlacement(placement) {
    if (!placement) return null;
    return placement.split('-')[0];
  }

  arrowDirectionClass(firstOrderPlacement) {
    switch (firstOrderPlacement) {
      case 'right':
        return css.arrowLeft;
      case 'left':
        return css.arrowRight;
      case 'top':
        return css.arrowDown;
      case 'bottom':
        return css.arrowUp;
      default:
        return css.arrowUp;
    }
  }

  render() {
    const { placement, className, children, fadeIn, theme, eventsEnabled } = this.props;

    return (
      <Popper placement={placement} eventsEnabled={eventsEnabled}>
        {({ ref, style, placement }) => {
          const firstOrderPlacement = this.firstOrderPlacement(placement);
          const arrowDirectionClass = this.arrowDirectionClass(firstOrderPlacement);
          const subContainerStyle = {
            display: 'flex',
            flexDirection:
              firstOrderPlacement === 'top' || firstOrderPlacement === 'bottom' ? 'column' : 'row',
          };
          const childrenContainerClassName = cx(
            css.childrenContainer,
            css.wrapper,
            theme === "dark" ? css.dark : css.light
          );
          const content = <div className={childrenContainerClassName}>{children}</div>;
          const subContainerClassName = fadeIn ? cx(animationsCss.fadeIn, className) : className;

          return (
            <div
              ref={ref}
              className={cx(css.container, css.mobileTooltip)}
              style={style}
              data-placement={placement}
            >
              <div className={subContainerClassName} style={subContainerStyle}>
                {(firstOrderPlacement === 'left' || firstOrderPlacement === 'top') && content}
                <div>
                  <div className={cx(css.arrow, arrowDirectionClass)} />
                </div>
                {(firstOrderPlacement === 'right' || firstOrderPlacement === 'bottom') && content}
              </div>
            </div>
          );
        }}
      </Popper>
    );
  }
}

export { Manager as TooltipManager, Reference as TooltipReference, Tooltip };

我认为我需要将这些添加到我的道具中。这些是正确的吗？

  placement: string,
  className?: string,
  children?: any,
  fadeIn: any,

我缺少这两个的类型注释，我不确定如何继续：

  firstOrderPlacement(placement) {..}

  arrowDirectionClass(firstOrderPlacement) {..}

有什么帮助吗？

【问题讨论】：

标签： reactjs flowtype

【解决方案1】：

注释Props赞：

type Props = {
  ...
  placement: string,
  className?: string,
  children?: any,
  fadeIn: any,
  ...
}

Placement参数为stringfirstOrderPlacement(placement) {..}，函数返回值为null或string，所以可以使用maybe type进行注解：

firstOrderPlacement(placement: string): ?string => {...}

或者使用联合类型，因为maybe type 覆盖undefined。

type FirstOrder = string | null;

firstOrderPlacement 函数的结果是arrowDirectionClass 的参数。所以参数类型：

arrowDirectionClass(firstOrderPlacement: ?string): string => {...}

或者：

arrowDirectionClass(firstOrderPlacement: FirstOrder): string => {...}

【讨论】：

【解决方案2】：

这些正确吗？

试试看吧！

但请记住，使用any 是一种基本上只是关闭输入的快捷方式。对于children，您期望反应元素通常应该只使用React.node。如果您基本上想要任意嵌套的类似 DOM 的内容（如反应元素、元素数组、文本字符串等），这将起作用。fadeIn 看起来它可能是一个字符串，但很难做到不知从何而来。

我缺少这两个的类型注释，我不确定如何继续：

Flow 希望您输入函数的参数。比如：

firstOrderPlacement(placement: string) {

或其他。

【讨论】：