[Guide] 用户引导显示时异常

[yzj578492228]

tdesign-mobile-react 版本

0.18.0

重现链接

No response

重现步骤

import React, { useState,useEffect,useRef } from 'react';
import { Guide, Button, Popup, Input } from 'tdesign-mobile-react';
import './index.css';

const DiyHelp = (props) =>{
  const [visible, setVisible] = useState(false);
  const [current, setCurrent] = useState(-1);

  const highlightLayerRef = useRef(null);

  const steps = [
    {
      element: "#diy-top-title",
      title: '用户引导标题',
      body: '这里是已选的商品款式，点击它可以重新选择想要定制的商品种类、款式！',
      placement: 'center',
      offset:[-10, 20]
    },
    {
      element: '.base-guide .label-field',
      title: '用户引导标题',
      body: '用户引导的说明文案',
      placement: 'bottom',
      highlightPadding: 0,
    },
    {
      element: '.base-guide .action',
      title: '用户引导标题',
      body: '用户引导的说明文案',
      placement: 'bottom-right',
    },
  ];

  useEffect(() => {
    console.log("DiyHelp",props.visible)
    setVisible(props.visible)
  }, [props.visible])

  useEffect(() => {
    console.log("DiyHelp visible",visible)
    handleClick(visible)
    props.setVisible && props.setVisible(visible)
  }, [visible])
  

  const handleClick = (visible) => {
    setTimeout(() => {
      setCurrent(visible ? 0 : -1);
    }, 2000);
  };

  const handleChange = (current, { e, total }) => {
    console.log(current, e, total);
    setCurrent(current);
  };

  const handleNextStepClick = ({ e, next, current, total }) => {
    console.log(e, next, current, total);
  };

  const handleFinish = ({ e, current, total }) => {
    setVisible(false);
    console.log(e, current, total);
  };

  const handleSkip = ({ e, current, total }) => {
    setVisible(false);
    console.log(e, current, total);
  };
  const handleBack = ({ e, current, total }) => {
    console.log(e, current, total);
  };

  return (
    <div className="guide-demo"  ref={highlightLayerRef}>
      <Guide
        current={current}
        steps={steps}
        onChange={handleChange}
        onNextStepClick={handleNextStepClick}
        onFinish={handleFinish}
        onSkip={handleSkip}
        onBack={handleBack}
      ></Guide>
    </div>
  );
};

export default DiyHelp;
以上是代码

期望结果

不能有问题

实际结果

setStyle.ts:13 Uncaught TypeError: Cannot read properties of null (reading 'style') at setStyle.ts:13:8 at Array.forEach (<anonymous>) at setStyle (setStyle.ts:10:8) at setHighlightLayerPosition2 (Guide.tsx:157:5) at Guide.tsx:174:7

这个行 setHighlightLayerPosition(highlightLayerRef.current);

官方案例里面一样有问题

框架版本

react 19

浏览器版本

No response

系统版本

No response

Node版本

18

补充说明

No response

[github-actions]

👋 @yzj578492228，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。