我看到了许多在 svelte 组件中传递 prop 值的样式,例如,
<MyComponent color={"#b291ff7a"} />
<MyComponent color="#b291ff7a" />
<MyComponent color={value} />
<MyComponent color="{value}" />
它们有什么区别?我什么时候应该使用哪一个?
只是要求澄清
我看到了许多在 svelte 组件中传递 prop 值的样式,例如,
<MyComponent color={"#b291ff7a"} />
<MyComponent color="#b291ff7a" />
<MyComponent color={value} />
<MyComponent color="{value}" />
它们有什么区别?我什么时候应该使用哪一个?
只是要求澄清
我想在 内的加载函数中访问 cookie +layout.js
。如果 cookie 中没有保存 jwt,我希望能够使模板中的标头/导航在导航中显示“登录/注册”,但如果有则显示“注销”。
下面是我的+layout.js
. 我希望它能够像在我的文件中完全相同的代码中那样访问 cookie +page.server.js
。相反,我收到错误“无法读取未定义的属性(读取'get')”
export function load({ cookies }) {
return {
jwt: cookies.get("jwt")
}
}
我们在 SvelteKit 应用程序的多个位置使用 EventSource,如下所示:
<script>
import { onDestroy } from 'svelte';
import { customEventSource } from '$lib/events';
const callback = (event: MessageEvent) => {
console.log('event:', event);
};
customEventSource.addEventListener('message', callback);
onDestroy(() => {
customEventSource.removeEventListener('message', callback);
});
</script>
正如你所看到的,每次都有很多东西要写。
难道没有一种神奇的方法(正如 Svelte 教给我们的那样)来简化吗?
特别是这样我就不必每次都手动调用?onDestroy
我正在使用 SvelteKit,并且尝试渲染一个锚元素,为没有 JavaScript 的用户打开登录页面,但如果用户启用了 JavaScript,则渲染一个打开模态的按钮,以获得更好的用户体验。我怎样才能做到这一点?
目前,我正在像这样实现它(该组件接受 href 并将其呈现为样式为按钮的锚元素):
<Button
href="/login"
on:click={(e) => {
e.preventDefault();
modalStore.trigger(modal);
}}
id="toggleAuthBtn"
>
Login
</Button>
然而,这对于可访问性不太友好,因为它被渲染为锚元素。
Svelte 拒绝这种语法:
// conditional open link tag
{#if whatever}
<a href="myurl">
{/if}
//
// many lines of code for dynamic text output
//
// conditional close link tag
{#if whatever}
</a>
{/if}
Svelte 的编译器ParseError: Unexpected block closing tag
在第一个条件块上抛出:,因为它看到<a>
没有匹配的</a>
.
这是一种常见的需求:某些东西可能需要在某些情况下成为超链接,但在其他情况下则不需要,并且其中的内容过于复杂,无法复制粘贴,因此会出现两次。我想同样的事情可以出现在任何其他带有开始和结束标签的 html 标签上,人们希望有条件地在某些东西周围添加一个 html 包装器。
当然,可以通过为每种 html 标签创建一个条件组件并插入内部代码来实现这一点,或者通过将内部内容移动到一个函数并将其注入到 DOM 中来实现这一点{@html...}
,但对于如此基本的东西来说,这些都是笨拙的解决方案而且简单。
这似乎是框架应该提供的东西。有没有一种干净的方法来做到这一点?
我在 Svelte 的命名插槽上使用插槽道具时遇到问题。
Svelte文档提到:Named slots can also have props; use the let directive on an element with a slot="..." attribute, instead of on the component itself.
但我不知道如何使用它。
文档: https: //learn.svelte.dev/tutorial/slot-props
我有这样的代码示例。
// $lib/components/Navbar.svelte
import Lead from './Lead.svelte'
import Trail from './Trail.svelte'
<nav>
<slot name="lead" {Lead}>(lead)</slot>
<ul>
<slot name="trail" {Item}>(trail)</slot>
</ul>
</nav>
// using
import Navbar from '$lib/components/Navbar.svelte'
// error: Property 'default' does not exist on type '{ lead: { Lead: typeof Lead__SvelteComponent }; };
<Navbar let:{Lead}> // <= error at this line
<svelte:fragment slot="lead">
<Lead {my_props}>
<span>More</span>
</Lead>
</svelte:fragment>
</Navbar>
请帮忙!
我正在尝试制作 Svelte 5 项目(我知道它仍处于 alpha 阶段,但我想玩一下它),我现在使用它作为模板
我的应用程序.svelte
<script>
import { withPrevSignals } from './withPrev'
const color = withPrevSignals('green')
let inputVal = $state('')
function save() {
color.curr = inputVal;
inputVal = ''
}
</script>
<p>Prev: {color.prev}</p>
<p>Curr: {color.curr}</p>
<input bind:value={inputVal} />
<button on:click={save}>Save</button>
<button on:click={color.undo}>Undo</button>
withPrev.js
export function withPrevSignals(initialValue) {
let curr = $state(initialValue)
let prev = $state(undefined)
function undo() {
curr = prev
prev = undefined
}
return {
get curr() { return curr },
set curr(newValue) {
prev = curr
curr = newValue
},
get prev() { return prev },
undo
}
}
我不断收到 Uncaught ReferenceError: $state 在 svelte 5 游乐场和本地均未定义。我在这里做错了什么?
我想使用 use:enhance 动态更改操作路径。
但是,我的代码没有按我的预期工作。它总是重定向到“?/错误”。不是“?/a”
<script>
import { enhance } from "$app/forms";
/** @type {import("./$types").SubmitFunction} */
const handleSubmit = ({formData, action}) => {
switch(formData.get("type")) {
case "a":
action = new URL("?/a", action);
console.log(action) // action changed.
break;
// And So On...
}
}
</script>
<form action="?/error" use:enhance={handleSubmit}>
<button name="type" value="a">Submit</button>
</form>