如果没有使用 Typescript 传递给 NextJS 中的功能组件，如何设置 props 的默认值

Question

这是组件：

const defaultDesc = "welcome to homepage";

    export default function Header(Props: {
       title:string,
      desc?:string
    }): JSX.Element {
    
    }

如果我不传入desc，<Header>那么我想defaultDesc默认设置值。一种方法是检查 的空值desc，然后将其设置为defaultDesc。
但是，是否有其他有效的方法可以避免在通过许多道具时进行多次检查。

      <Header
        title="Homepage"
      />

Answer 1

您可以定义一个接口并使用默认值解构 Props，以防 Props 没有传递给组件的可选参数，如下所示

const defaultDesc = "welcome to homepage";

interface  HeaderProps{
       title:string,
      desc?:string
}

export default function Header(Props: HeaderProps): JSX.Element {
    
const { title, desc= defaultDesc } = Props;   // you can use let, however const is recommended


}

参考