关于antd>Anchor在4.21.3版本的问题

1.引出问题

const titleOptions = ['页面设置', '字段设置', '自定义按钮设置', '快捷操作设置'];
const handleClick = (e, link) => {
  e.preventDefault(); // 阻止默认的跳转行为
};

<Anchor onClick={handleClick} getContainer={() => containerRef?.current}>
  <Link href='#page-settings-card' title={titleOptions[0]} />
  <Link href='#fields' title={titleOptions[1]} />
  <Link href='#custom-actions' title={titleOptions[2]} />
  <Link href='#fast' title={titleOptions[3]} />
</Anchor>

这段代码它能有什么坏心思呢？ 没错，你要是4.21.3版本的antd,你明明觉得没啥问题，但是页面却会报错或者白板。

没错就是这个导致的问题，因为在react，dom刚开始的时候containerRef?.current这个是没有的，所有会导致getContainer指向到空的元素，那么怎么解决这个问题呢？

话不多说，直接上代码

const useAnchor = () => {
  const containerRef = useRef(null);
  const [isAnchorReady, setAnchorReady] = useState(false);

  useEffect(() => {
   if (containerRef.current) {
    setAnchorReady(true);
   }
  }, []);
  return {
   containerRef,
   isAnchorReady,
  };
};

const titleOptions = ['页面设置', '字段设置', '自定义按钮设置', '快捷操作设置'];
const handleClick = (e, link) => {
  e.preventDefault(); // 阻止默认的跳转行为
};
const { containerRef, isAnchorReady } = useAnchor();

{isAnchorReady && (
  <Anchor onClick={handleClick} getContainer={() => containerRef?.current}>
   <Link href='#page-settings-card' title={titleOptions[0]} />
   <Link href='#fields' title={titleOptions[1]} />
   <Link href='#custom-actions' title={titleOptions[2]} />
   <Link href='#fast' title={titleOptions[3]} />
  </Anchor>
)}

我们自己加一个渲染机制，让containerRef?.current挂载上元素再去渲染，这样就解决了上面的报错问题。