在Astro中，您将如何将Markdown组件传递给React或Preact组件

Question

类似于如何将Markdown组件传递给Astro组件，我想将一个导入React/Prect组件。

当我将组件导入React/Precact时，它似乎没有直接工作，所以我尝试从父Astro组件传入它们，如下所示：

<DemoContent
blog={(<Blog />)}
tweet={(<TweetThread />)}
highlight={(<HighlightClips />)}
client:visible
/>

但这给了我CCD_ 1。

建议的方法是什么？

Answer 1

当将Astro或Markdown组件传递到Preact这样的框架时，您需要使用"；插槽"你可以用slot="prop-name"把它们连接起来，比如：

<DemoContent>
<Blog slot="blog" />
<TweetThread slot="tweet" />
<HighlightClips slot="highlight" />
</DemoContent>

然后，在Preact组件中，您可以访问blog、tweet和highlight作为道具。您将呈现类似于{children}道具的这些：

export function DemoContent({ blog, tweet, highlight }) {
return (
<section>
{blog}
{tweet}
{highlight}
</section>
)
}

如果您碰巧使用这些框架，这些框架也将映射到Vue或Svelte插槽。希望这能有所帮助！