假设我有一个名为 的可重用组件button.svelte，

<script>
export let text = undefined
</script>

<button>{text}</button>

现在我在另一个组件中重用这个组件，如下所示，

<script>
import { onMount } from "svelte"
import Button from "./Button.svelte"

let button

onMount(() => {
    console.log(button) // How do I print the html of the button element?
})
</script>

<Button text="Button" bind:this="{button}"></Button>

但buttonofbind:this似乎没有按钮元素的 html。如何获取按钮的 html 元素？

概括

• 语境

• 实际行为（问题）

• 预期行为

• 最小的、可测试的、可执行的示例

  • 数据

  • 来源

• 笔记

• 线索

语境

我正在尝试在 Svelt Web 应用程序中使用 Axios 从 URL 获取 JSON 对象列表http://localhost:1337/restaurants。此调用将在 Svelte 组件初始化时执行，类似于 Svelte 教程： https: //svelte.dev/tutorial/await-blocks。

实际行为（问题）

当我打开包含 Svelte 组件的网页时，我在 Chromium 开发工具网络面板中看不到网络调用。

我可以在网页中看到此错误（显然要感谢我的{:catch}）：

类型错误：无法将未定义或 null 转换为对象

预期行为

当我打开包含 Svelte 组件的网页时，我应该在 Chromium 开发工具网络面板中看到网络调用，并且它应该在列表项中显示每个 JSON 对象。

当然，绝对不能出现以下错误：

类型错误：无法将未定义或 null 转换为对象

最小的、可测试的、可执行的示例

数据

此示例使用 (Strapi) URL http://localhost:1337/restaurants，它返回以下 JSON 对象数组：

[{"id":1,"name":"Biscotte Restaurant","description":"欢迎光临 Biscotte 餐厅！ Biscotte 餐厅提供采用新鲜优质产品烹制的美食，这些产品通常是本地产品，尽可能是有机产品，并且始终由充满激情的制作人。","published_at":"2021-10-02T20:04:26.780Z","created_at":"2021-10-02T19:40:30.378Z","updated_at":"2021-10-02T20: 04:26.816Z","类别":[{"id":2,"name":"早午餐","published_at":"2021-10-02T20:04:03.395Z","created_at":"2021- 10-02T19:41:15.186Z","updated_at":"2021-10-02T20:04:03.437Z"}]}]

来源

<script>
    import axios from 'axios';

    async function getRestaurants() { …

似乎每次启动 VScode 时 Tailwind CSS IntelliSense 都不起作用，重新安装后它就可以工作，另一方面，当它工作时，Tailwind CSS IntelliSense 不会提示，除非我按空格键。如果我将一门课移至另一门课，除非我按空格键，否则不会建议

我正在使用 Tailwind CSS IntelliSense v0.7.4 ，VScode 1.63.2 ，Ubuntu 21.10

包.json

{
  "name": "svelte-ts-tailwind-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public",
    "check": "svelte-check --tsconfig ./tsconfig.json"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^21.0.0",
    "@rollup/plugin-node-resolve": "^13.0.0",
    "@rollup/plugin-typescript": "^8.3.0",
    "@tsconfig/svelte": "^2.0.1",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.4",
    "postcss-load-config": "^3.1.0",
    "rollup": "^2.60.2",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.44.2",
    "svelte-check": "^2.2.10",
    "svelte-preprocess": "^4.9.4",
    "tailwindcss": "~3.0.0",
    "tslib": "^2.3.1", …

我想在 Svelte(Kit) 组件的 props 中使用泛型类型，我发现有这样的type T = $$Generic东西：

<script lang="ts">
  import type { Writable } from "svelte/store";
  type T = $$Generic;
  export let store: Writable<T[]>;
</script>

虽然这很棒，但我确实需要比这更多的信息：我要求 具有T属性id。通常我会做这样的事情：

export type WithId = { id: number };
function foo<T extends WithId>(property: T) { ... }

我怎样才能对 Svelte 组件道具做类似的事情？

如果我们通过degit安装示例模板，则无法获得将默认的5000端口改为其他端口的方法。

是否有一种简单的方法可以强制重新启动 Svelte 组件？

重启用例：

• 清除 HTML 文件输入的文件列表（您无法重置路径/值）
• 使用 CSS 悬停时，选择项目后导航栏下拉折叠

也许除了重启还有其他解决方案，但让我们在这里使用组件重启。

在适用于上传用例的重启代码下方：

SomeApp.svelte

<script>
      ...
      import Upload from "./upload/Upload.svelte";

      export let uid;  // firebase uid from auth

      // restart the Upload component after the upload 
      // to clear the filename of the <input type="file" ..../>  
      // restart by making use of a dynamic (falsy) component
      let upload_component = Upload;
      let restart = false;

      $: if (restart) {
         // use a falsy to stop / destroy this component 
         upload_component = null; …

onMount与 SvelteJS 中没有生命周期事件不同beforeMount。那么，我们在挂载之前如何获取页面所依赖的数据呢？onMount获取会产生故障。可以说我可以将依赖 DOM 包装在 if 条件中。但我认为这不是正确的解决方案。与 Sapper 非常相似，有一个preload函数可以在安装之前加载页面相关数据。preloadSvelteJS 中这种（Sapper 的）行为的替代方案是什么？

我想让这样的事情成为可能：

<div 
   class="overflow-scroll h-screen antialiased ..."
   class:whiteTheme="bg-gray-100 text-gray-800 ..."
   class:darkTheme="bg-blue-900 ..."
>
...
</div>

因此，将始终应用一组类。一组仅当whiteTheme为真时，另一组仅当darkTheme为真时。

我知道我可以定义一个whiteTheme和一个darkThemecss 类并让它像那样工作

<div 
   class="overflow-scroll h-screen antialiased ..."
   class:whiteTheme
   class:darkTheme
>

但关键是我想单独设计每个元素（尤其是在我的应用程序的开始阶段）。并且必须为不同类中的每个元素定义我的一组类......对我来说，使用 Tailwind.css 和对特定元素进行试验的目的（无需在 css 定义和元素定义之间来回跳转）。

我可以选择的另一种方式是：

<div 
   class="overflow-scroll h-screen antialiased ... {whiteTheme?'bg-gray-100 text-gray-800 ...':'bg-blue-900 ...'}">

这没什么，但我很想通过在单独的属性中定义事物来提高可读性和可维护性......

所以我想知道是否有办法让它按照我想要的方式工作......例如，我可以轻松扩展 Svelte 编译器吗？

最好的约翰内斯

我已经设置好svelte-preprocess，所以我可以成功地做到这一点：

<script lang="typescript">
    let someConstant:string = "some constant";
    console.log({someConstant});
</script>

这样可行。但我不知道如何外化这个常数。如果我尝试：

<script lang="typescript">
    import {someConstant} from './SomeTypescript.ts'
    console.log({someConstant});
</script>    

我收到此错误消息：

error TS2691: An import path cannot end with a '.ts' extension. Consider importing './SomeTypescript' instead.

当我将其更改为

<script lang="typescript">
    import {someConstant} from './SomeTypescript'
    console.log({someConstant});
</script>

我收到此错误：

Error: Could not resolve './SomeTypescript' from src/tom/ManageAirtableModels.svelte

这样做的正确方法是什么？

我正在迭代一个数据数组，我想在渲染它之前对其进行一些处理。

我知道我可以创建一个新组件并将数组条目传递给 i，并在该子组件中进行处理，或者我可以添加一个辅助函数getClass(entry)，或者我可以内联一个十元运算符，

但我想知道是否有一种方法可以做这样的事情，将一些代码内联到每个块中。非功能性示例：

<div class="Menu">
  {#each menuEntries as entry, i }
    {{ 
      let classes = entry.classes;
      
      if (entry.submenu) {
        classes += ' has-submenu';
      }
     }}
      
      <div class="menu-entry {classes}">...</div>
  {/each}
</div>

编辑：

这似乎是一个像这样的解决方法。唯一的事情是classes必须在循环之前定义。

<script>
let classes = '';
</script>
<div class="Menu">
  {#each menuEntries as entry, i }
    {(() => {
      classes = entry.classes;
      
      if (entry.submenu) {
        classes += ' has-submenu';
      }
      return ''; // return empty string so Svelte does not print it
     })()}
      
      <div class="menu-entry …