未使用工具提示组件的Component

Question

我试图在工具提示组件中使用反应门。没有错误，但它似乎不起作用：

1. 工具提示仍然被带有overflow:hidden的父容器部分隐藏。
2. 我没有看到它添加到#root之外的新div中。

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>
      )}
    </>
  );

这是完整代码的码箱。

Answer 1

我认为没有什么问题，问题在于您的风格，我对您的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);
      }
    `}

及其工作：

​