将Svelte组件作为道具传递

html5 • • 问答

我对svelte环境很陌生，我有一些反应代码并尝试将它们转换为苗条以用于学习目的。

在 react 中，我们可以传递一个字符串或 React Node 作为 props。

<TabPane
name="profile"
title={<img src="images/profile.svg" alt="Profile" />}
key="1"
>
    {/** some code **/} 
</TabPane>

我试图在 svelte 中使用相同的代码，但它会引发错误。

回答

是的，您不能在 Svelte 中执行此操作。

您必须弄清楚如何使用 Svelte 中可用的 API 实现相同的结果。

例如，您可以使用<slot>：

<TabPane
  name="profile"
  key="1"
>
  <img slot="title" src="images/profile.svg" alt="Profile" />
  <!-- some code, eg: -->
  <div>Some code here</div>
</TabPane>

<!-- filename: TabPane.svelte -->

<h1>
  <slot name="title" />
</h1>

<slot />

带有属性的元素slot="title"将被插入到<slot name="title">

其余的元素将被插入到 <slot />

这在 React 中是等价的：

function TabPane({ title, children }) {
  return (
    <>
       <h1>{title}</h1>
       {children}
    </>
  );
}

function TabPane({ title, children }) {
  return (
    <>
       <h1>{title}</h1>
       {children}
    </>
  );
}

如果您只想为标题传递字符串，您可以将字符串包裹起来，<svelte:fragment>以便您可以添加slot="title"属性

参考：

  • Svelte 教程：https : //svelte.dev/tutorial/slots
  • 视频教程：https : //www.youtube.com/watch?v=rwYgOU0WmVk&list=PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR&index=59
以上是将Svelte组件作为道具传递的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>