将 Svelte 组件作为道具传递

Question

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

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

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

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

Answer 1

是的，您不能在 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" 属性

<TabPane
  name="profile"
  key="1"
>
  <svelte:fragment slot="title">
    string title here
  <svelte:fragment>
  <!-- some code, eg: -->
  <div>Some code here</div>
</TabPane>

---

参考：

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

Answer 2

在 99% 的情况下，您会希望按照 Tan Li Hau 的建议使用插槽。但是，可以将组件作为道具传递。为此，我们将使用 <svelte:component>。这是相当严格的，但这是一种可能性。

https://svelte.dev/docs#svelte_component

<svelte:component>

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

<script>
  import Component from './component.svelte'
</script>

<svelte:component this={Component} foo={bar} />

以上等价于：

<script>
  import Component from './component.svelte'
</script>

<Component foo={bar} />

通过 props 向下传递组件

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

<!-- app.svelte -->

<script>
  import ComponentA from './component-a.svelte'
  import ComponentB from './component-b.svelte'
</script>

<ComponentA foo={ComponentB} />

并渲染组件...

<!-- component-a.svelte -->

<script>
  export let foo
</script>

<svelte:component this={foo} />

注意事项

请注意，有些事情您不能做：

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

Svelte 甚至可能不是为执行此操作而设计的（即使它有效）。所以是的，除非你真的需要这个，否则使用插槽。但现在您知道这是可能的。