Search code examples
reactjspropertiessvelte

Pass Svelte Component as Props

I am pretty new to the svelte environment, I have some react code and try to convert them as svelte for the learning purpose.

In the react, we can pass a string or React Node as props.

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

I am trying to use the same code in svelte, but it throws an error. enter image description here

Solution

  • You can't do this in Svelte.

    You'll have to figure out how you can achieve the same outcome with the APIs available in Svelte.

    For example, you can use <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 />

    The element with attribute slot="title" will be inserted into <slot name="title">

    and the rest of the elements will be inserted into <slot />

    This is equivalent in React:

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

    If you want to pass in only string for the title, you could wrap the string around with <svelte:fragment> so that you can add the slot="title" attribute

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

    Reference: