javascript - 处理 Svelte 组件 Prop 的最佳方式

Question

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

解决这个问题的最佳方法是什么而不加起来 31 行 export let attribute到组件并将它们添加到组件内的真实 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被明确定义为 Prop (导出)。

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

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

(这里定义了name，所以不会包含在$$restProps中，需要自己添加)