reactjs - 将 Svelte 组件作为 Prop 传递

Question

我对 svelte 很陌生环境，
我有一些 react 代码并尝试将它们转换为 slim 以用于学习目的。
在 react 中，我们可以传递一个字符串或 react 节点作为 Prop 。

<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>

引用:

slim 教程:https://svelte.dev/tutorial/slots

视频教程:https://www.youtube.com/watch?v=rwYgOU0WmVk&list=PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR&index=59