如何在 Qwik 中将组件作为组件 prop 传递

Question

在react中我们可以将组件作为组件属性传递。例如

链接到代码和框。

interface IButtonProps {
  icon?: React.ComponentType;
  children: React.ReactNode;
}

const Button = ({ icon: Icon, children }: IButtonProps) => (
  <button>
    {Icon && <Icon />}
    {children}
  </button>
);

const DotIcon = (props) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      width="24"
      height="24"
      {...props}
    >
      <circle cx="12" cy="12" r="5" />
    </svg>
  );
};

export default function App() {
  return <Button icon={DotIcon}>Example button</Button>;
}

我注意到回调的

PropFunction<(value: T) => void>

技巧，但是如何准确地将组件作为 prop 传递？

重要！我使用的是Qwik框架，而不是react

Answer 1

不确定您是否仍然需要答案，但这确实取决于。

如果您想在按钮中添加自定义图标，这是可选的。 使用命名插槽。

export const Button = component$(() => {
  return (
    <button>
      <Slot name="icon" />
      <Slot />
    </button>
  );
});

export const Usage = component$(() => {
  return (
    <Button>
      <Icon name="something" q:slot="icon" />
      Launch
    </Button>
  );
});

您也可以传递一个渲染函数，但是您正在利用 qwiks 惊人的优化，并且子级和父级将不再解耦。