面试题：Qwik组件Props中等难度问题

Question

在Qwik组件中，如何正确地传递和接收Props？请举例说明不同类型Props（如字符串、数字、对象）的传递和处理方式。

Answer 1

1. 传递和接收字符串类型Props

传递Props： 在父组件中，假设我们有一个 HelloWorld 组件，需要传递一个字符串类型的 name Prop 给它。

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

const App = component$(() => {
  return (
    <div>
      <HelloWorld name="John" />
    </div>
  );
});

export default App;

接收Props： 在 HelloWorld 组件中接收并使用这个 name Prop。

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

export interface HelloWorldProps extends Props {
  name: string;
}

const HelloWorld = component$(({ name }: HelloWorldProps) => {
  return <div>Hello, {name}!</div>;
});

export default HelloWorld;

2. 传递和接收数字类型Props

传递Props： 在父组件中传递一个数字类型的 age Prop 给 UserInfo 组件。

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

const App = component$(() => {
  return (
    <div>
      <UserInfo age={30} />
    </div>
  );
});

export default App;

接收Props： 在 UserInfo 组件中接收并使用这个 age Prop。

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

export interface UserInfoProps extends Props {
  age: number;
}

const UserInfo = component$(({ age }: UserInfoProps) => {
  return <div>User's age is {age}</div>;
});

export default UserInfo;

3. 传递和接收对象类型Props

传递Props： 在父组件中创建一个对象，并将其作为 user Prop 传递给 UserProfile 组件。

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

const App = component$(() => {
  const user = {
    name: 'Jane',
    age: 25,
    email: '[e-mail]'
  };
  return (
    <div>
      <UserProfile user={user} />
    </div>
  );
});

export default App;

接收Props： 在 UserProfile 组件中接收并使用这个 user Prop。

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

export interface UserProfileProps extends Props {
  user: {
    name: string;
    age: number;
    email: string;
  };
}

const UserProfile = component$(({ user }: UserProfileProps) => {
  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <p>Email: {user.email}</p>
    </div>
  );
});

export default UserProfile;