面试题：Qwik中如何在组件里结合Props与State实现动态文本展示

Question

在Qwik中，假设你要构建一个组件，通过接收外部传入的Props作为初始文本内容，并结合组件内部的State实现文本的动态变化（比如点击按钮后文本反转），请描述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 接收Props：在组件定义时，通过类型声明接收外部传入的Props作为初始文本内容。
2. 定义State：在组件内部使用useStore钩子来定义一个状态变量，用于存储当前要展示的文本。初始值设为Props传入的文本。
3. 实现动态变化逻辑：编写一个函数来处理文本反转逻辑，在函数中更新State。
4. 绑定事件与渲染：在组件的JSX中，绑定按钮的点击事件到反转函数，并渲染当前的文本状态。

关键代码片段

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

// 定义Props类型
type MyComponentProps = {
  initialText: string;
};

// 组件定义
export const MyComponent = component$((props: MyComponentProps) => {
  // 使用useStore定义状态
  const store = useStore({
    currentText: props.initialText
  });

  // 文本反转函数
  const reverseText = () => {
    store.currentText = store.currentText.split('').reverse().join('');
  };

  return (
    <div>
      <p>{store.currentText}</p>
      <button onClick={reverseText}>反转文本</button>
    </div>
  );
});