有没有办法访问 astro 插槽的孩子？

【问题标题】：Is there a way to access the children of an astro slot?有没有办法访问 astro 插槽的孩子？
【发布时间】：2023-02-03 12:18:14
【问题描述】：

我正在尝试使用 astro 插槽将子项传递给 SolidJS 组件。我的 Solid 组件使用其子组件生成幻灯片。

<Slider>
  {props.children}
</Slider>

问题是，当我尝试执行此操作时，我传递给组件的孩子被 <astro-slot> 包裹，因此我的组件只能“看到”一个孩子。有没有办法正确访问插槽的子项，或者完全删除包装器标签？

【问题讨论】：

标签： astrojs astro

【解决方案1】：

您可以使用命名插槽将子元素拆分成这样

// src/pages/index.astro

<Slider>
  <div slot="1"></div>
  <div slot="2"></div>
  <div slot="3"></div>
</Slider>

然后您可以使用props访问命名插槽

// src/components/Slider.tsx

export default function Slider(props) {            
    return (
        <>
            {props.1}
            {props.2}
            {props.3}
        </>
    );
}

【讨论】：