Question

我正在尝试创建一个TextAreaAutosize组件，该组件返回一个textarea，该文本区域在需要时会自动调整其高度。

我想在高度变化时运行onHeightChange函数，因此我使用了svelte反应性语句（$ :)，以便每当高度变化时，该段代码就会运行。

App.svelte

<script>
  import TextArea from "./TextAreaAutosize.svelte";
  let val, ref;
</script>

<TextArea 
  bind:value={val}  
  bind:ref={ref} 
  style={"height: 90px; maxHeight=40"} 
  minRows={4}
 />

TextAreaAutosize.svelte

<script context="module">
  import calculateNodeHeight from './calculateNodeHeight.js'
  let uid = 0;
  const noop = () => {};
</script>

<script>
  export let value = '';
  export let style;
  export let useCacheForDOMMeasurements = false;
  export let minRows = -Infinity;
  export let maxRows = +Infinity;
  export let onHeightChange = noop;
  export let ref = null;

  let refConfig = {
    _uid: uid++
  }

  let state = {
    height: 0,
    minHeight: -Infinity,
    maxHeight: +Infinity
  }

  // runs when change in height
  $: if(state.height){

    //block 1

    console.log('height changed')
    onHeightChange(refConfig)

  }

  // resizes element on initial mount or whenever change in value
  $:if(ref || value){

     //block 2

    _resizeComponent()

  }

  // function for resizing textarea when required
  function _resizeComponent(){
    if(!ref){
      return;
    }

    const refHeight = calculateNodeHeight(
      ref,
      refConfig._uid,
      useCacheForDOMMeasurements,
      minRows,
      maxRows
    );

    const {
      height,
      minHeight,
      maxHeight,
      rowCount,
      valueRowCount
    } = refHeight;

    refConfig.rowCount = rowCount;
    refConfig.valueRowCount = rowCount;

    if(
      state.height !== height ||
      state.maxHeight !== maxHeight ||
      state.minHeight !== minHeight
    ){
      state = {height, minHeight, maxHeight}
    }
  }

</script>

<textarea 
  bind:value={value} 
  bind:this={ref} 
  style={`${style};height: ${state.height}px;`}
  on:click
  on:change  
  class={$$props.class}
/>

在此组件中，只要state.height发生变化，块1就应该运行。但它根本没有运行。但是，当我将它放置在block2之后时，它会在state.height

变化时运行

当textarea更改块2的值运行并调用_resizeComponent时，然后如果需要，将状态更新为新高度。如果高度改变，应该触发block1。但是只有当我将它放置在block2之后时，它才会触发该块

我无法理解为什么在我的代码中出现此行为。无论状态如何变化，block1中的语句都应在状态变化时运行。

Answer 1

Svelte通过分析该代码无法确定第二个块可能会影响state的值。因此，它不会对块重新排序以先运行第二个块。（如果最后发生意外更改，它不能只继续运行反应式块；那就是无限循环。）

如果不是_resizeComponent()，而是state = _resizeComponent()，并且相应地更改了功能，那将会改变。或者，只需手动重新排列块。

顺便说一句，有一种更简单的方法来获得自动调整大小的文本区域：https://svelte.dev/repl/40f4c7846e6f4052927ff5f9c5271b66?version=3.6.8

svelte中的反应性减速未按预期工作

1 个答案: