Ellipsis组件在Link下面点击展开如何阻止跳转页面

[Sxxiong]

Ellipsis组件在Link下点击展开如何阻止跳转页面
Ellipsis 组件有提供 stopPropagationForActionButtons

• 文档描述是

stopPropagationForActionButtons	阻止展开操作，收起操作引发的事件冒泡	PropagationEvent[]	[]

但是不知道怎么使用 有大佬教教么
代码片段如下:

<Link to="/">
  <Ellipsis
    direction="end"
    content={content}
    expandText="展开"
    collapseText="收起"
  />
</Link>

复现demo

[yaogengzhu]

 <>
    <Link to="/">
      <Ellipsis
        onContentClick={(e) => e.preventDefault()}
        direction="end"
        content={content}
        expandText="展开"
        collapseText="收起"
      />
    </Link>
  </>

这个应该能实现，但是你这么写似乎有点奇怪

[Sxxiong]

奇怪是因为省略了业务代码... 试了一下 这个方法并没有用🙏

[yaogengzhu]

先提一个issue？😄看了下应该没有处理默认行为

[miracles1919]

[awmleer]

不过这样的话，正常的链接点击也失效了……？

[miracles1919]

喔 没仔细看..

[awmleer]

奇怪，按理说这样就可以了：

<Link to="/">
  <Ellipsis
    direction="end"
    content={content}
    expandText="展开"
    collapseText="收起"
    stopPropagationForActionButtons={["click"]}
  />
</Link>

但是我试了一下确实不行

[xiaoyao96]

因为Link配合to会渲染成a标签和href属性，点击事件不会阻止href。

[xiaoyao96]

如果想要内容可跳转，展开/收起按钮不能跳转。应该这样：

import React from "react";
import { Ellipsis } from "antd-mobile";
import { Link, useNavigate } from "react-router-dom";

const content =
  "蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。";

export default () => {
  let navigate = useNavigate();
  return (
    <>
      <Link
        to="/"
        onClick={(e) => {
          e.preventDefault();
          navigate("/");
        }}
      >
        <Ellipsis
          direction="end"
          content={content}
          expandText="展开"
          collapseText="收起"
          stopPropagationForActionButtons={["click"]}
        />
      </Link>
    </>
  );
};

------ 后续更新 -------
此demo有问题，请查看评论区卡哥优化后的代码：

[awmleer]

+1 在这个基础上优化了一下，写了个 demo

<div
  onClick={() => {
    navigate("/");
  }}
>
  <Ellipsis
    direction="end"
    content={content}
    expandText="展开"
    collapseText="收起"
    stopPropagationForActionButtons={["click"]}
  />
</div>

感觉是 a 标签嵌套，导致 stopPropagation 行为不符合预期，改成外层用 div，手动处理 onClick 的时候调用 navigate 就可以了

[yaogengzhu]

总觉得不太对劲～