2

我是 Svelte 的新手，我很喜欢它！制作一个带有几块 UI 和共享状态的单组件应用程序非常有趣和简单（需要具备 HTML、CSS 和 JS 的中级知识以及 React 的初学者知识）。

然而，最终，我希望制作更复杂的应用程序，这些应用程序将涉及大量输入和状态，所以很明显，我需要了解如何在组件之间使用状态。

但是，我对制作自定义输入组件和在其他地方最好地使用状态的最佳方法感到有些困惑。具体来说，我希望创建一个自定义样式的input type="range"组件并在父级中使用它。

在写这个问题的过程中，我确实找到了一种似乎可行的方法，但是我在文档或谷歌搜索中找不到与这种情况完全匹配的东西，所以我不确定我的解决方案。这是我想出的：https ://github.com/arrowtype/svelte-slider/ 。

我的解决方案总结

我从 SvelteJS 模板 ( https://github.com/sveltejs/template ) 开始。

我App.svelte的是这样的：

<script>
    import SimpleSlider from './SimpleSlider.svelte'

    export let sliderValA = 0;
    export let sliderValB = 15;
</script>

<main>
    <h1>A simple SvelteJS slider component</h1>

    <p>Slider A value is {sliderValA}</p>
    <SimpleSlider bind:value={sliderValA} min="0" max="10" step="1"/>

    <p>Slider B value is {sliderValB}</p>
    <SimpleSlider bind:value={sliderValB} min="0" max="30" step="5"/>

    <p>A + B is {sliderValA + sliderValB}</p>
</main>

是这样SimpleSlider.svelte的：

<script>
    export let value = 5;
    export let min = 0;
    export let max = 10;
    export let step = 1;
</script>

<div class="slider-container">
    <input type="range" bind:value={value} min={min} max={max} step={step}>
    <span>{value}</span>
</div>

<style>
    .slider-container {
        display: flex;
        align-items: center;
    }
    input {
        margin:0 0.5em 0 0;
    }
</style>

在我的测试中，这似乎有效。但是，我发现到达那里很困难，我不确定这是否是最佳实践。

我应该做更多的事情，比如使用svelte/store模块来处理全局状态（如果没有，我什么时候开始需要它）？

4

1 回答 1

1

老实说，这看起来真的很好，似乎是我要走的路。为什么要使用全球商店？使用它意味着让数据随处可用并保存在您的应用程序中，这听起来有点矫枉过正，当只需要一个小形式的组件时。这样做对于小型独立组件更好。

我能想到的SimpleSlider.svelte只有一点点改进：

<script>
  export let moreProps = {}
</script>

<div class="slider-container">
    <input type="range" bind:value {min} {max} {step} {...moreProps}>
    <span>{value}</span>
</div>

这种方法利用了简洁的速记语法并减少了代码量。moreProps如果您决定传递其他属性disable，例如：

<SimpleSlider bind:value={sliderValA} min="0" max="10" step="1" moreProps={{disabled:true}}/>
于 2020-05-30T13:04:39.003 回答