如何在 SolidJS 中强制重新渲染引用

Question

大家好，我有以下问题。

我有一个显示在页面上的参考。它工作得很好。我最近实现了一些功能，例如当在屏幕上创建以下 4 个组件时，我想将高度从 100% 动态调整到 50%。现在我可以让这段代码工作了。但问题是，除非我用鼠标手动移动浏览器窗口，否则引用不会重新渲染。

下面我尝试通过 createEffect 强制重新渲染，但它似乎仍然不起作用。任何帮助将不胜感激。

let widgetRef: HTMLDivElement | undefined
...
...

const [shouldRender, setShouldRender] = createSignal(true);

  createEffect(() => {
    if (widgetRef) {
      if (props.multiChart === MultiChartEnum.QUAD) {
        // Apply height change directly
        widgetRef.style.height = "50%";

        // Force reflow by reading layout properties
        requestAnimationFrame(() => {
          widgetRef?.offsetHeight; // Read a layout property to force reflow
        });
      } else {
        // Reset height when not in QUAD mode
        widgetRef.style.height = "100%";
      }
    }
  })

...
...
some code
...

return (
    <>
...
...
...
<Show when={shouldRender()}>
      <div
        class={`content ${props.multiChart === MultiChartEnum.QUAD ? 'quad-chart' : ''}`}>
        <Show when={loadingVisible()}>
          <Loading/>
        </Show>
        <div
          ref={widgetRef}
          ...
        />
      </div>
</Show>

.less 文件

&.content {
    height: 100%; // normal height
    // When `.quad-chart` is active, set height to 50%
    &.quad-chart {
      height: 50%;
    }
  }

Answer 1

仅当您明确不希望重新渲染内容，或者出于其他原因需要直接访问 DOM 时，才需要使用 refs。

对于您的用例，似乎您可以声明式地执行此操作：

<div
  style={{ height: props.multiChart === MultiChartEnum.QUAD ? '50%' : '100%' }}
  />