React - 即使定义了 defaultProps，TypeScript 也会将 undefined 添加到 prop

Posted 2023-02-22

【中文标题】React - 即使定义了 defaultProps，TypeScript 也会将 undefined 添加到 prop

【英文标题】：React - TypeScript adding undefined to prop even though defaultProps are defined

【发布时间】：2021-03-30 07:18:09

【问题描述】：

为什么会做以下事情：

type Props = 
  name?: string
  age: number


const Test = FC<Props> = (props) => 
  return (
    <h1>Hello, props.name. You are props.age years old.</h1>
  )


Test.defaultProps = 
  name: "John"

即使name 在defaultProps 中定义，当strict 模式设置为true 时，发出name 可能是undefined 的警告。

【问题讨论】：

因为您指定 name 可以在 Props 中未定义

如果你确定你会传​​递名字然后删除?如果不是问我我有一个解决方案

@MoshFeu 我认为在FC 中传递Props 的目的是您可以这样做...

@GayatriDipali 不一定。 name 有一个默认值。但是如果你删除?，它会在你每次使用组件时要求name prop，这是无效的，因为它有一个默认属性。

不。这意味着name 可以是未定义的，因此代码应该考虑它。您可以删除可选标记 (?)，因为您知道名称永远不会未定义。

【参考方案1】：

Typescript 不会检查 defaultProps 的功能组件。如果你想要一个默认值，你应该使用 ES6 默认值，如：

type Props = 
  name?: string
  age: number


const Test: FC<Props> = ( name = "John" ) => 

【讨论】：

虽然...github.com/Microsoft/TypeScript/wiki/…

nvm，我看到它是用来上课的

是的，类的行为不同。

这是否意味着这里的答案是错误的？ ***.com/a/37282264/10040604

据我所知，关于函数组件的部分是错误的：函数组件上的 defaultProps 不会更改类型。也许有一些我不知道的编译器标志可以让它工作。

【参考方案2】：

你可以做的是：

props.name ? props.name : "Jhon"

【讨论】：

这行得通，但首先破坏了使用defaultProps 的全部目的