javascript - React Portal 不使用工具提示组件

Question

我正在尝试将react-portal与我的工具提示组件一起使用。没有错误，但它似乎不起作用：

1. 工具提示仍被其父容器部分隐藏overflow:hidden
2. 我没有看到它添加到#root.

import { Portal } from 'react-portal';

return (
    <>
      <Wrapper
        onMouseEnter={showTip}
        onMouseLeave={hideTip}
        ref={triggerRef}
      >
        {children}
      </Wrapper>

      {render && (
        <Portal node={triggerRef.current}>
          <Content
            placement={placement}
            fade={active}
          >
            {content}
          </Content>
        </Portal>
      )}
    </>
  );

这是完整代码的Codesandbox。

Answer 1

我认为 react portal 没有问题，问题是你的风格，我在你的 portal.js 文件中做了一点改动：

  if (typeof window === "object") {
    if (target) {
      root = document.getElementById("root");
    }
    el = document.createElement("div");
    el.setAttribute('style', 'position:relative'); // this line
    el.id = "portal-root";
  } 

因为您的工具提示显示在您的文本上并 onMouseLeave立即被调用并且工具提示再次隐藏，所以在样式组件中以及在我更改底部样式时的上例中：

  ${({ placement }) =>
    placement === "top" &&
    css`
      bottom: calc(100% + 50px); // this line
      &::before {
        top: calc(100% - 10px);
      }
    `}

及其作品：