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

Question

这是组件：

const defaultDesc = "welcome to homepage";
export default function Header(Props: {
title:string,
desc?:string
}): JSX.Element {

}

如果我没有在<Header>中传递desc，那么我想默认设置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

}

参考

Answer 2

每当我将两个(最小值为1的默认值变量(或更多参数作为参数传递给函数时，我都会创建interface/type，以使它们更可读。

在这种情况下，我会做这样的事情。

const defaultDesc = "welcome to homepage";
interface Props {
title: string,
desc?: string,
}
export default function Header({
title,
desc=defaultDesc // this is what you are looking for
}: Props): JSX.Element {
// rest of the logic
// ...
}