Question

我有这样的组件：

// @flow
import React from 'react';

type Props = {
  level: number,
  className: string,
  children: any,
  rest: any
};

export const Heading = ({
  level = 1,
  className,
  children,
  ...rest
}: Props): React$Element<any> => {
  const Tag = `h${level}`;

  return (
    <Tag className={className} {...rest}>
      {children}
    </Tag>
  );
};

Heading.displayName = 'Heading';

如果我将无效类型传递给level属性，则没有错误消息：

e.g。

    <Heading level="3333">Labels</Heading>

运行yarn flow会返回：

没有错误！

但如果我删除了值的默认值

export const Heading = ({
  level,

我明白了：

17：const Tag = h${level};

^^^^^ undefined. This type cannot be coerced to const Tag =
`h${level}`; ^^^^^^^^^^^ string

这不是我期望发生的事情。

Answer 1

在this discussion中，有人在将boolean传递给模板字符串时遇到类似的错误。答案如下：

Flow尝试帮助捕获意外的字符串强制转换，因此您只需要在此处使用String(true)包装bool，以传达明确的强制转换意图。

Flow显示null，boolean或undefined的相同行为。如果你将其中一个传递给模板字符串，它会对你大喊大叫。

建议的解决方案是明确地将level转换为字符串，如果它是故意的......

const Tag = `h${String(level)}`;

...或（更好）定义一个在这个上下文中完全有意义的默认道具，因为如果流程没有在这里抱怨，你会尝试渲染一个绝对不是你想要的<hundefined>元素。所以这不是一个错误的错误信息。

defaultProps抑制错误的流错误消息

1 个答案: