defaultProps 抑制不正确的流错误消息答案

【问题标题】：defaultProps suppressing incorrect flow error messagedefaultProps 抑制不正确的流错误消息
【发布时间】：2017-07-02 21:18:06
【问题描述】：

我有一个这样的组件：

// @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 属性，则不会出现错误消息：

例如

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

运行yarn flow 返回：

没有错误！

但是如果我删除 value 的默认值，

export const Heading = ({
  level,

我明白了：

17: 常量标签 = h${level};

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

这不是我所期望的。

【问题讨论】：

该错误消息中的降价标记有问题。我猜这是复制和粘贴错误？
你检查我的答案了吗？

标签： reactjs flowtype

【解决方案1】：

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

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

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

建议的解决方案是如果有意将level 显式转换为字符串...

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

...或者（更好）定义一个在这种情况下完全有意义的默认道具，因为如果流在这里没有抱怨，你会尝试渲染一个<hundefined>element，这绝对不是你想要的。所以这并不是一个不正确的错误信息。

【讨论】：