如何在SolidJS中强制重新渲染Ref元素？

核心问题分析 #

1. 同时使用CSS类控制高度和直接操作DOM style，两者冲突导致样式未生效；
2. createEffect未明确追踪props.multiChart的变化，属性切换时effect未触发；
3. widgetRef可能在组件未挂载时被访问，导致样式设置无效；
4. 手动读取offsetHeight触发重排的方式时机错误，且SolidJS本身可处理DOM更新，问题根源在响应式依赖未对齐。

解决方案 #

步骤1：移除冗余DOM样式操作

LESS中已通过.quad-chart类控制高度，无需再用widgetRef.style.height直接修改，避免样式冲突。

步骤2：让Effect正确追踪依赖

确保createEffect监听props.multiChart变化，模式切换时自动触发effect逻辑。

步骤3：确保Ref在组件挂载后操作

通过onMount或在effect中先判断widgetRef是否存在，保证DOM元素已挂载后再处理。

修改后的代码示例

import { createEffect, onMount } from 'solid-js';

let widgetRef: HTMLDivElement | undefined;

// 移除无用的shouldRender信号，SolidJS靠响应式自动更新
createEffect(() => {
  // 明确追踪props.multiChart，确保变化时触发effect
  const isQuadMode = props.multiChart === MultiChartEnum.QUAD;
  
  if (widgetRef) {
    // 若内部组件需感知高度变化，可触发其更新逻辑（如第三方图表的resize）
    widgetRef.dispatchEvent(new CustomEvent('resize'));
  }
});

// 可选：用onMount确保组件挂载后再访问ref
onMount(() => {
  if (widgetRef && props.multiChart === MultiChartEnum.QUAD) {
    widgetRef.dispatchEvent(new CustomEvent('resize'));
  }
});

return (
  <>
    <div class={`content ${props.multiChart === MultiChartEnum.QUAD ? 'quad-chart' : ''}`}>
      <Show when={loadingVisible()}>
        <Loading/>
      </Show>
      <div
        ref={widgetRef}
        {/* 若为第三方图表组件，监听resize事件触发自身重绘 */}
        onResize={() => {
          // 示例：chartInstance?.resize();
        }}
        ...
      />
    </div>
  </>
);

LESS代码保持不变

&.content {
  height: 100%; // normal height
  &.quad-chart {
    height: 50%;
  }
}

额外说明 #

若widgetRef指向第三方图表组件（如ECharts、Highcharts），这类组件通常不会自动监听容器大小变化，需手动调用其resize方法：

• 在createEffect中模式切换时触发resize；
• 给容器添加防抖后的resize事件监听；
• 用SolidJS的createEventListener监听容器大小变化。

内容的提问来源于stack exchange，提问作者Zurf