面试题：Qwik组件Props动态传递的场景及实现

场景一：根据用户交互动态更新组件

场景描述：在一个电商产品展示页面，用户可以通过点击不同的按钮来切换产品的展示模式（如列表模式、网格模式）。这时需要根据用户的点击操作动态传递不同的 props 给展示产品的 Qwik 组件，以改变其展示样式。
代码实现：
- 首先创建一个父组件，在其中定义状态和点击处理函数。假设使用 Qwik 的 useSignal 来管理状态：

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

const ProductDisplayParent = component$(() => {
    const displayMode = useSignal('list');
    const handleModeChange = (mode: string) => {
        displayMode.value = mode;
    };
    return (
        <div>
            <button onClick={() => handleModeChange('list')}>列表模式</button>
            <button onClick={() => handleModeChange('grid')}>网格模式</button>
            <ProductDisplayComponent mode={displayMode.value} />
        </div>
    );
});

export default ProductDisplayParent;

然后创建 ProductDisplayComponent 组件，接收 mode 属性并根据其值进行不同的展示：

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

const ProductDisplayComponent = component$(({ mode }: { mode: string }) => {
    if (mode === 'list') {
        return (
            <ul>
                <li>产品 1</li>
                <li>产品 2</li>
            </ul>
        );
    } else {
        return (
            <div className="grid">
                <div>产品 1</div>
                <div>产品 2</div>
            </div>
        );
    }
});

export default ProductDisplayComponent;

场景二：根据 API 响应动态渲染组件

场景描述：在一个新闻应用中，从 API 获取新闻数据，根据新闻的类别（如体育、科技、娱乐等）动态传递不同的 props 给新闻展示组件，以显示不同样式的新闻内容。
代码实现：
- 先创建获取数据的函数，假设使用 Qwik 的 useTask$ 来进行异步操作：

import { component$, useTask$ } from '@builder.io/qwik';
import { getNews } from './api';

const NewsPage = component$(() => {
    const [news, setNews] = useTask$(async () => {
        const response = await getNews();
        return response.data;
    }, []);
    return (
        <div>
            {news.value && news.value.map((article) => (
                <NewsArticleComponent category={article.category} content={article.content} />
            ))}
        </div>
    );
});

export default NewsPage;

再创建 NewsArticleComponent 组件，根据 category 属性展示不同样式的新闻内容：

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

const NewsArticleComponent = component$(({ category, content }: { category: string; content: string }) => {
    let categoryClass = '';
    if (category === '体育') {
        categoryClass = 'sports - article';
    } else if (category === '科技') {
        categoryClass = 'tech - article';
    } else {
        categoryClass = 'general - article';
    }
    return (
        <div className={categoryClass}>
            <p>{content}</p>
        </div>
    );
});

export default NewsArticleComponent;

这里假设 getNews 是从 API 获取新闻数据的函数，实际应用中需要根据具体的 API 进行实现。

星途面试题库

面试题：Qwik组件Props动态传递的场景及实现

知识考点

面试题答案

场景一：根据用户交互动态更新组件

场景二：根据 API 响应动态渲染组件