面试题：Qwik 中如何为组件Props设置默认值

Question

在Qwik前端开发中，阐述为组件Props设置默认值的具体方式，并举例说明。

Answer 1

在Qwik中，为组件Props设置默认值有以下方式：

使用函数参数默认值

在组件函数定义时，利用JavaScript函数参数默认值的特性。

例如，假设有一个简单的 Greeting 组件，接收 name 属性：

import { component$, useSignal } from '@builder.io/qwik';

const Greeting = component$(({ name = 'Guest' }: { name: string }) => {
  return <div>Hello, {name}!</div>;
});

export default Greeting;

在上述代码中，name 属性如果没有被传递，就会使用默认值 Guest。

使用解构赋值并结合默认值

同样对于上述 Greeting 组件，也可以这样写：

import { component$, useSignal } from '@builder.io/qwik';

const Greeting = component$((props) => {
  const { name = 'Guest' } = props;
  return <div>Hello, {name}!</div>;
});

export default Greeting;

这里通过对 props 对象进行解构赋值，并为 name 设置默认值，达到相同效果。