从 Qwik 中的父组件引用投影的子组件

Reference projected child component from parent component in Qwik

提问人:unitario 提问时间:9/25/2023 更新时间:9/25/2023 访问量:28

问:

我想在 Qwik 中创建一个具有声明性语法的组件:<Breadcrumb>

<Breadcrumb>
  <BreadcrumbSegment url="/collections/233...">Tintins äventyr</BreadcrumbSegment>
  <BreadcrumbSegment url="/works/233...">Blå lotus</BreadcrumbSegment>
  <BreadcrumbSegment url="/books/233...">Kinesiska</BreadcrumbSegment>
</Breadcrumb>

这会在呈现时生成以下标记:

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li>
      <a href="/collections/233...">
        Tintins äventyr
      </a>
    </li>
    <li>
      <a href="/works/233...">
        Blå lotus
      </a>
    </li>
    <li>
      <a href="/books/233..." aria-current="page">
        Kinesiska
      </a>
    </li>
  </ol>
</nav>

<script type="application/ld+json">
{
   "@context":"https://schema.org",
   "@type":"BreadcrumbList",
   "itemListElement":[
      {
         "@type":"ListItem",
         "position":1,
         "name":"Tintins äventyr",
         "item":"/collections/233..."
      },
      {
         "@type":"ListItem",
         "position":2,
         "name":"Blå lotus",
         "item":"/collections/233..."
      },
      {
         "@type":"ListItem",
         "position":3,
         "name":"Kinesiska",
         "item":"/books/233..."
      }
   ]
}
</script>

为了生成该 JSON-LD,我需要从父组件中引用这些子组件并检索其插槽值和 URL 属性,但还没有找到实现此目的的直接方法。

我正在从 Qwik 文档中阅读以下内容:

注意:Qwik 中的插槽是声明性的,允许 Qwik 将父母和孩子隔离开来。由于插槽是声明性的,因此组件无法读取或转换子项。

很明显,这里有局限性。显然,我可以将 URL 和名称数组传递给组件,但这不是我想要的。我想在示例中保留声明性语法。<Breadcrumb>

从概念上讲,我将如何解决这个问题?我是 Qwik 的新手(对 React 的了解有限),如果答案很明显,很抱歉。

QWIK的

评论


答: 暂无答案