将Svelte组件作为Props传递

Question

我对 svelte 环境还比较陌生，我想把一些 React 代码转换成 svelte 以便学习。

在 React 中，我们可以将字符串或 React 节点作为 props 传递。

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

我试图在svelte中使用相同的代码，但它会抛出一个错误。

- Naveen DA

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

- Tan Li Hau

---

<svelte:fragment> 只允许字符串吗？ - Naveen DA

如果您熟悉React的片段（即<> </>），则可以以相同的方式使用<svelte:fragment>。它可以包含任何内容。 - Nick

对于任何遇到这个问题的人：你不需要使用svelte:fragment来处理字符串。只需使用export let变量或即将推出的props$符号。只有在将HTML或组件传递给组件时才需要使用插槽。如果你希望插槽的内容显示出来时没有其他包围元素（比如<div>），就像React一样，你可以使用svelte:fragment，这在某些情况下非常有用。祝你编码愉快！ - undefined

Answer 2

很多情况下，你会像Tan Li Hau建议的那样使用插槽。然而，也可以将组件作为props传递。为此，我们将使用<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 传递包含子组件的组件
• 或者对通过 props 传递的组件进行其他任何操作

Svelte 可能甚至没有设计用于此（尽管它可以工作）。所以，除非你真的需要这样做，否则请使用插槽。但现在你知道这是可能的了。

- Nick