在 PrimeReact 手风琴标题中渲染链接

Question

我正在使用 PrimeReact 库，特别是他们的

<Accordion>

组件（请参阅 https://primereact.org/accordion/ ）。 PrimeReact 提供了一个

<AccordionTab>

，应将其渲染为

<Accordion>

的子级。每个选项卡都会呈现一个用于打开/关闭选项卡的可单击标题，该标题的元素是

<a>

。如果我将内容添加到标题（通过使用

header

的

<AccordionTab>

属性），则内容中的元素（即使按钮或锚点）不可单击（它们的

onClick

处理程序甚至不会触发）。我想克服这个问题，并在单击子锚点/按钮时防止 PrimeReact 的默认行为（即打开/关闭选项卡）。

我尝试通过

headerAction

属性定位

pt

元素，并使用调用

onClick

的自定义处理程序覆盖其

preventDefault()/stopPropagation()

处理程序，但这没有用。

const preventOpeningClosingIfAnotherLinkWasClicked = (evt: MouseEvent<HTMLAnchorElement, MouseEvent>) => {
    if (!evt.currentTarget.closest(`.${headerClassName}`)) {
        evt.preventDefault();
        evt.stopPropagation();
    }
};

const passThroughOptions = {
    headerAction: { onClick: preventOpeningClosingIfAnotherLinkWasClicked }
};

return (
    <AccordionTab className={headerClassName} pt={passThroughOptions} header={headerElement}>
        {child.content}
    </AccordionTab>
);

不用将

<AccordionTab>

渲染为

<Accordion>

的直接子级，我可以使用

position: relative

将它们包装在 div 中，并使标题内容成为该 div 的直接子级，并使用

position: absolute

来正确定位它。这将有效地将内容呈现为标题

<a>

元素的父元素，我相信这将使它能够捕获点击事件。但这是一个奇怪的修复，可能会导致选项卡本身的布局/样式出现问题，如果可能的话，我希望避免这种问题。

如何解决这个问题？

Answer 1

我无法使用

pt

属性实现所需的行为，但直接将

onClick

回调处理程序分配给

<AccordingTab>

的子级允许使用

e.stopPropagation

并防止选项卡折叠/展开。

示例：

import { Accordion, AccordionTab } from "primereact/accordion";

export const PrimeReact = () => {
  const helloWorldClick = (e) => {
    e.stopPropagation();
    console.log("I am clicked");
  };

  return (
    <>
      <Accordion activeIndex={0}>
        <AccordionTab
          header={
            <>
              <a onClick={helloWorldClick} href="google.com" target="_blank">
                My Link
              </a>

              <button onClick={helloWorldClick}>Hello World</button>
            </>
          }
        >
          <p className="m-0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </AccordionTab>
      </Accordion>
    </>
  );
};