将 Svelte 组件作为道具传递

Question

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

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

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

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

Answer 1

在许多情况下，您会像 Tan Li Hau 建议的那样使用插槽。但是，可以将组件作为 props 传递。为此，我们将利用<svelte:component>. 这是相当有限的，但它是一种可能性。

\n

https://svelte.dev/docs#svelte_component

\n

<svelte:component>

\n

通常，您会<svelte:component>这样使用：

\n

<script>\n  import Component from \'./component.svelte\'\n</script>\n\n<svelte:component this={Component} foo={bar} />\n

\n

上面相当于这样：

\n

<script>\n  import Component from \'./component.svelte\'\n</script>\n\n<Component foo={bar} />\n

\n

通过 props 传递组件

\n

这意味着我们实际上可以通过 props 传递组件。

\n

<!-- app.svelte -->\n\n<script>\n  import ComponentA from \'./component-a.svelte\'\n  import ComponentB from \'./component-b.svelte\'\n</script>\n\n<ComponentA foo={ComponentB} />\n

\n

并渲染组件\xe2\x80\xa6

\n

<!-- component-a.svelte -->\n\n<script>\n  export let foo\n</script>\n\n<svelte:component this={foo} />\n

\n

注意事项

\n

请注意，有几件事您不能执行：

\n

\n
• 在通过 props 传递下来的组件上设置 props
\n
• 子级通过 props 传递组件
\n
• 或者用作为 prop 传递的组件做几乎任何其他事情
\n

\n

Svelte 甚至可能不是为了做到这一点而设计的（尽管它有效）。所以是的，除非你真的需要这个，否则请使用插槽。但现在您知道这是可能的。

\n

Answer 2

是的，您不能在 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}
    </>
  );
}

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

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

参考：

• Svelte 教程：https : //svelte.dev/tutorial/slots
• 视频教程：https : //www.youtube.com/watch?v=rwYgOU0WmVk&list=PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR&index=59