处理 Svelte 组件 props 的最佳方法

Question

我正在使用 SvelteKit 和 Tailwind 构建一个应用程序。我知道，当使用 Tailwind 进行样式设置时，建议利用组件来减少必须使用 Tailwinds 实用程序类编写的重复代码量。我的问题是，当制作基于 HTML 标签（例如<input>标签）的组件时，处理该组件中的 props（通常只是该标签的属性）会变得令人不知所措。MDN 显示该<input>标签有 31 个可能的属性。我知道我不会使用所有它们，但来回将它们作为道具添加到组件中会变得很烦人。

export let attribute解决这个问题的最佳方法是什么，而不需要向组件添加最多 31 行并将它们添加到组件内部的真实HTML 标记中？

例子：

<script>
    export let name;
    export let id;
    export let type;
    export let disabled;
    export let required;
    export let minLength;
    export let maxLength;
    export let min;
    export let max;
    export let pattern;

    let value;
    let borderColor = '#D1D5DB';

    const inputHandler = (e) => {
        if (e.target.value === '') {
            borderColor = '#D1D5DB';
        } else {
            borderColor = '';
        }
    };
</script>

<input
    {name}
    {id}
    {type}
    {disabled}
    {required}
    {minLength}
    {maxLength}
    {min}
    {max}
    {pattern}
    on:input={inputHandler}
    style={`border-color: ${borderColor}`}
    class="
    w-full px-1 py-px mb-4 bg-transparent border-2 border-gray-300 
    rounded-xl last:mb-0 valid:border-emerald-300 invalid:border-rose-400
  "
/>

Answer 1

如果你想能够做到

<MyInputField name="123" maxLength="5" type="text">

无需声明所有这些额外属性，最好的方法是使用$$restProps，该对象将包含已传递给组件但尚未显式定义为 props（导出）的所有 props。

<script>
  export let name = "";
</script>

<input name={name} {..$$restProps}>

（这里name已经定义了，所以不会包含在内$$restProps，我必须自己添加）