Refactor/anchor get current anchor v2

src/anchor/Anchor.tsx

@@ -56,6 +56,17 @@ const Anchor = forwardRefWithStatics(
       opacity: 0,
     });
 
+    useEffect(() => {
+      if (isFunction(getCurrentAnchor)) {
+        const newHref = getCurrentAnchor(activeItem);
+        setActiveItem(newHref);
+      } else {
+        const href = window?.location.hash;
+        setActiveItem(decodeURIComponent(href));
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getCurrentAnchor]);
+
     const anchorEl = useRef(null);
     const intervalRef = useRef<IntervalRef>({
       items: [],
@@ -83,9 +94,9 @@ const Anchor = forwardRefWithStatics(
 
     const handleScrollTo = (link: string) => {
       const anchor = getAnchorTarget(link);
-      if (!anchor) return;
       onChange?.(link, activeItem);
       setActiveItem(link);
+      if (!anchor) return;
       intervalRef.current.handleScrollLock = true;
       const { scrollContainer } = intervalRef.current;
       const scrollTop = getScroll(scrollContainer);
@@ -100,7 +111,8 @@ const Anchor = forwardRefWithStatics(
 
     const handleClick = (item: Item, e: React.MouseEvent<HTMLDivElement>) => {
       onClick?.({ e, ...item });
-      handleScrollTo(item.href);
+      const newHref = isFunction(getCurrentAnchor) ? getCurrentAnchor(item.href) : item.href;
+      handleScrollTo(newHref);
     };
 
     useEffect(() => {
@@ -153,7 +165,8 @@ const Anchor = forwardRefWithStatics(
       return () => {
         scrollContainer?.removeEventListener('scroll', handleScroll);
       };
-    }, [container, handleScroll]);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [container]);
 
     const anchorClass = classNames(
       `${classPrefix}-anchor`,
@@ -175,7 +188,7 @@ const Anchor = forwardRefWithStatics(
       <AnchorContext.Provider
         value={{
           onClick: handleClick,
-          activeItem: getCurrentAnchor?.(activeItem) || activeItem,
+          activeItem,
           registerItem,
           unregisterItem,
         }}

src/anchor/_example/customize-highlight.jsx

@@ -1,13 +1,25 @@
-import React from 'react';
-import { Anchor } from 'tdesign-react';
+import React, { useState } from 'react';
+import { Anchor, Button } from 'tdesign-react';
 
 const { AnchorItem } = Anchor;
 
 export default function AnchorBase() {
+  const [active, setActive] = useState('#自定义游标锚点');
+
   return (
     <div style={{ display: 'flex' }}>
-      <div style={{ flex: '1' }}></div>
-      <Anchor getCurrentAnchor={() => '#基础锚点'}>
+      <div style={{ flex: '1' }}>
+        <Button onClick={() => setActive('#基础锚点')}>基础锚点</Button>
+        <Button onClick={() => setActive('#多级锚点')} style={{ marginLeft: '8px' }}>
+          多级锚点
+        </Button>
+      </div>
+      <Anchor
+        getCurrentAnchor={(link) => {
+          console.log('link', link);
+          return active;
+        }}
+      >
         <AnchorItem href="#基础锚点" title="基础锚点" />
         <AnchorItem href="#多级锚点" title="多级锚点" />
         <AnchorItem href="#自定义游标锚点" title="自定义游标锚点" />

test/snap/__snapshots__/csr.test.jsx.snap

@@ -3404,7 +3404,29 @@ exports[`csr snapshot test > csr test src/anchor/_example/customize-highlight.js
       >
         <div
           style="flex: 1;"
-        />
+        >
+          <button
+            class="t-button t-button--theme-primary t-button--variant-base"
+            type="button"
+          >
+            <span
+              class="t-button__text"
+            >
+              基础锚点
+            </span>
+          </button>
+          <button
+            class="t-button t-button--theme-primary t-button--variant-base"
+            style="margin-left: 8px;"
+            type="button"
+          >
+            <span
+              class="t-button__text"
+            >
+              多级锚点
+            </span>
+          </button>
+        </div>
         <div
           class="t-anchor t-size-m"
         >
@@ -3421,7 +3443,7 @@ exports[`csr snapshot test > csr test src/anchor/_example/customize-highlight.js
             </div>
           </div>
           <div
-            class="t-anchor__item t-is-active"
+            class="t-anchor__item"
           >
             <a
               class="t-anchor__item-link"
@@ -3445,7 +3467,7 @@ exports[`csr snapshot test > csr test src/anchor/_example/customize-highlight.js
             </a>
           </div>
           <div
-            class="t-anchor__item"
+            class="t-anchor__item t-is-active"
           >
             <a
               class="t-anchor__item-link"
@@ -3514,7 +3536,29 @@ exports[`csr snapshot test > csr test src/anchor/_example/customize-highlight.js
     >
       <div
         style="flex: 1;"
-      />
+      >
+        <button
+          class="t-button t-button--theme-primary t-button--variant-base"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            基础锚点
+          </span>
+        </button>
+        <button
+          class="t-button t-button--theme-primary t-button--variant-base"
+          style="margin-left: 8px;"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            多级锚点
+          </span>
+        </button>
+      </div>
       <div
         class="t-anchor t-size-m"
       >
@@ -3531,7 +3575,7 @@ exports[`csr snapshot test > csr test src/anchor/_example/customize-highlight.js
           </div>
         </div>
         <div
-          class="t-anchor__item t-is-active"
+          class="t-anchor__item"
         >
           <a
             class="t-anchor__item-link"
@@ -3555,7 +3599,7 @@ exports[`csr snapshot test > csr test src/anchor/_example/customize-highlight.js
           </a>
         </div>
         <div
-          class="t-anchor__item"
+          class="t-anchor__item t-is-active"
         >
           <a
             class="t-anchor__item-link"

test/snap/__snapshots__/ssr.test.jsx.snap

@@ -24,7 +24,7 @@ exports[`ssr snapshot test > ssr test src/anchor/_example/container.jsx 1`] = `"
 
 exports[`ssr snapshot test > ssr test src/anchor/_example/cursor.jsx 1`] = `"<div style=\\"display:flex\\"><div class=\\"t-anchor t-size-m\\"><div class=\\"t-anchor__line\\"><div class=\\"t-anchor__line-cursor-wrapper\\" style=\\"top:0px;height:0px;opacity:0\\"><div style=\\"width:10px;height:10px;background-color:#0052D9;position:absolute;border-radius:50%;left:50%;margin-left:-5px;top:50%;margin-top:-5px\\"></div></div></div><div class=\\"t-anchor__item\\"><a href=\\"#基础锚点\\" class=\\"t-anchor__item-link\\" title=\\"基础锚点\\" target=\\"_self\\">基础锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#多级锚点\\" class=\\"t-anchor__item-link\\" title=\\"多级锚点\\" target=\\"_self\\">多级锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#指定容器锚点\\" class=\\"t-anchor__item-link\\" title=\\"指定容器锚点\\" target=\\"_self\\">指定容器锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#特定交互锚点\\" class=\\"t-anchor__item-link\\" title=\\"特定交互锚点\\" target=\\"_self\\">特定交互锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#尺寸\\" class=\\"t-anchor__item-link\\" title=\\"尺寸\\" target=\\"_self\\">尺寸</a></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/anchor/_example/customize-highlight.jsx 1`] = `"<div style=\\"display:flex\\"><div style=\\"flex:1\\"></div><div class=\\"t-anchor t-size-m\\"><div class=\\"t-anchor__line\\"><div class=\\"t-anchor__line-cursor-wrapper\\" style=\\"top:0px;height:0px;opacity:0\\"><div class=\\"t-anchor__line-cursor\\"></div></div></div><div class=\\"t-anchor__item t-is-active\\"><a href=\\"#基础锚点\\" class=\\"t-anchor__item-link\\" title=\\"基础锚点\\" target=\\"_self\\">基础锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#多级锚点\\" class=\\"t-anchor__item-link\\" title=\\"多级锚点\\" target=\\"_self\\">多级锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#自定义游标锚点\\" class=\\"t-anchor__item-link\\" title=\\"自定义游标锚点\\" target=\\"_self\\">自定义游标锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#指定容器锚点\\" class=\\"t-anchor__item-link\\" title=\\"指定容器锚点\\" target=\\"_self\\">指定容器锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#特定交互锚点\\" class=\\"t-anchor__item-link\\" title=\\"特定交互锚点\\" target=\\"_self\\">特定交互锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#不同尺寸的锚点\\" class=\\"t-anchor__item-link\\" title=\\"不同尺寸的锚点\\" target=\\"_self\\">不同尺寸的锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#自定义锚点高亮\\" class=\\"t-anchor__item-link\\" title=\\"自定义锚点高亮\\" target=\\"_self\\">自定义锚点高亮</a></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/anchor/_example/customize-highlight.jsx 1`] = `"<div style=\\"display:flex\\"><div style=\\"flex:1\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">基础锚点</span></button><button style=\\"margin-left:8px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">多级锚点</span></button></div><div class=\\"t-anchor t-size-m\\"><div class=\\"t-anchor__line\\"><div class=\\"t-anchor__line-cursor-wrapper\\" style=\\"top:0px;height:0px;opacity:0\\"><div class=\\"t-anchor__line-cursor\\"></div></div></div><div class=\\"t-anchor__item\\"><a href=\\"#基础锚点\\" class=\\"t-anchor__item-link\\" title=\\"基础锚点\\" target=\\"_self\\">基础锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#多级锚点\\" class=\\"t-anchor__item-link\\" title=\\"多级锚点\\" target=\\"_self\\">多级锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#自定义游标锚点\\" class=\\"t-anchor__item-link\\" title=\\"自定义游标锚点\\" target=\\"_self\\">自定义游标锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#指定容器锚点\\" class=\\"t-anchor__item-link\\" title=\\"指定容器锚点\\" target=\\"_self\\">指定容器锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#特定交互锚点\\" class=\\"t-anchor__item-link\\" title=\\"特定交互锚点\\" target=\\"_self\\">特定交互锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#不同尺寸的锚点\\" class=\\"t-anchor__item-link\\" title=\\"不同尺寸的锚点\\" target=\\"_self\\">不同尺寸的锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#自定义锚点高亮\\" class=\\"t-anchor__item-link\\" title=\\"自定义锚点高亮\\" target=\\"_self\\">自定义锚点高亮</a></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/anchor/_example/large.jsx 1`] = `"<div id=\\"size-large\\"><div class=\\"t-anchor t-size-l\\"><div class=\\"t-anchor__line\\"><div class=\\"t-anchor__line-cursor-wrapper\\" style=\\"top:0px;height:0px;opacity:0\\"><div class=\\"t-anchor__line-cursor\\"></div></div></div><div class=\\"t-anchor__item\\"><a href=\\"#default\\" class=\\"t-anchor__item-link\\" title=\\"基础锚点\\" target=\\"_self\\">基础锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#multiple\\" class=\\"t-anchor__item-link\\" title=\\"多级锚点\\" target=\\"_self\\">多级锚点</a></div><div class=\\"t-anchor__item\\"><a href=\\"#size\\" class=\\"t-anchor__item-link\\" title=\\"尺寸大小\\" target=\\"_self\\">尺寸大小</a><div class=\\"t-anchor__item\\"><a href=\\"#size\\" class=\\"t-anchor__item-link\\" title=\\"size-medium\\" target=\\"_self\\">size-medium</a></div><div class=\\"t-anchor__item\\"><a href=\\"#size-large\\" class=\\"t-anchor__item-link\\" title=\\"size-large\\" target=\\"_self\\">size-large</a></div></div><div class=\\"t-anchor__item\\"><a href=\\"#attach\\" class=\\"t-anchor__item-link\\" title=\\"指定容器\\" target=\\"_self\\">指定容器</a></div></div></div>"`;