Menu
I haven't found this feature anywhere in svelte 3.. I want it to be something like this..
App.svelte
<Error>
<p>Can't connect to the server!</p>
</Error>`
Error.svelte
<div>{props.children}</div>
I want App.svelte to show:
<div><p>Can't connect to the server!</p></div>
I only know how to do this with React's props.children.
980
The solution. To pass Svelte components dynamically down to a child component you have to use Svelte's <svelte:component> directive. <svelte:component> accepts a property called this . If the property this has a component attach to it than it will render the given Svelte component.
Class components So, the type of the children prop in a class component is ReactNode .
props. children }. The important thing to note here is that children are a special prop that is used to pass the data from the parent component to the children component but this data must be enclosed within the parent's opening and closing tag.
Svelte's compiler. React uses a virtual DOM to interpret the application code during runtime. It bundles a specific amount of overhead code, which will run in the browser's JavaScript engine to monitor and update the DOM.
You can use slot. It is a component provided by svelte. You can use it inside your component. Whatever is passed to component will be rendered in place of slot
Try this in your error.svelte
<div>
<slot />
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
