如何在Qwik框架中正确渲染子元素（Children）？

Qwik处理组件子元素的逻辑和React不同，它采用插槽（Slots）系统管理组件嵌套内容，而非直接将children作为常规props传递。要实现类似React的子元素渲染，需要用Qwik提供的useContent$() API获取默认插槽内容。

正确的组件写法 #

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

const Title = component$(() => {
  // 获取默认插槽的子内容
  const children = useContent$();
  return <h2>{children}</h2>;
});

export default Title;

使用方式 #

现在你可以像在React中一样嵌套使用组件：

<Title>Something</Title>

也支持复杂的嵌套JSX内容：

<Title>
  Hello <span style={{ color: 'red' }}>Qwik</span>
</Title>

为什么之前的写法无效？ #

你直接解构children作为props的方式不生效，原因是：

• Qwik的组件props仅用于传递可序列化的数据（字符串、数字、普通对象等），嵌套JSX属于插槽范畴，不属于常规props。
• 直接通过<Title children='Something' />传递的children只是普通字符串props，Qwik不会将其识别为组件的子元素。

特殊场景：显式传递子内容为props #

如果确实需要将子内容作为显式props传递（仅推荐用于简单文本，不支持复杂JSX），可以用非children的属性名（比如你之前用的text），或者将内容包裹为信号传递：

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

const Title = component$(({ children }) => {
  return <h2>{children}</h2>;
});

// 使用时传递信号包裹的内容
<Title children={$('Something')} />

内容的提问来源于stack exchange，提问作者Big boy