React-Tooltip 在页面刷新之前不显示

Question

这里有点奇怪。我的网站几乎完成了，只有一个问题。我已经实现了工具提示，但它们只在我刷新页面时显示！这是重现该问题的 GIF：

https://i.imgur.com/NbHyN77.mp4

包来自 NPM，在以下链接：https://www.npmjs.com/package/react-tooltip

我浏览了他们的文档、故障排除和在他们的 github 存储库中报告的问题，但没有任何内容描述我的问题。该网站正在直播：https://ezekias1337.github.io/Burning-Crusade-Talent-Calculator/#/

奇怪的是，如果我将其中一条路线添加为书签并将其加载到新选项卡中，它会在第一次加载。仅当我从图标中选择组件时才会出现此问题。

我确保从“react-tooltip”导入 ReactTooltip；我还在每个组件的底部和 app.js 中添加了。添加 data-for 属性并没有解决问题。

这是我的 App.js 的代码：

import ReactTooltip from 'react-tooltip';

class App extends Component {
  
  
    render() {
      return (
          <div className="App">
                            <CustomNavbar />
              <ClassSelector />
              
              <FooterComponent />
              <ReactTooltip 
                html={true}
              />
          </div>
      );
  }
}

export default App;

以下是与每个单独组件中的工具提示相关的代码：

a.) 具有工具提示的图像（每个图像都有唯一的工具提示）

<img
                  onMouseEnter={this.displayMouseOverlayInnerElement}
                  onMouseLeave={this.hideMouseOverlayInnerElement}
                  onMouseDown={() => {
                    this.talentClick();
                    this.toolTipFunction();
                  }}
                  onTouchEnd={this.talentClick}
                  className="talentHover"
                  src={overlayImage}
                  style={{ display: "none" }}
                  data-tip={Hunter[0].toolTip[0]}
                  id="1"
                />

b.) 组件的底部

<ReactTooltip data-html="true" />

知道我能做些什么来解决这个问题吗？

Answer 1

如果其他人也遇到这个问题，我在拔头发几个小时后终于找到了解决方案。

我使用了以下函数：

rebuildToolTip(){
    ReactTooltip.rebuild();
}

随后，我将此函数添加为正在呈现的组件上的 onLoad 事件处理程序。

<div
    style={{ position: "relative" }}
    onContextMenu={(e) => e.preventDefault()}
    className="frame-wrapper"
    id="Hunter"
    onLoad={() => {
      this.scrollComponentIntoView();
      this.rebuildToolTip();
    }}
  >

Answer 2

这是对我有用的东西 (https://github.com/wwayne/react-tooltip/issues/268)，为工具提示创建一个新组件并在 props 中传递所需的详细信息，如下代码所示。

import React from "react";
import ReactDOM from "react-dom";
import ReactTooltip from "react-tooltip";

// Create root level element for react-tooltips
const domNode = document.createElement('div');
document.body.appendChild(domNode);

// Wrapper component to portal react-tooltips
function BodyPortal ({ children }) {
  return ReactDOM.createPortal(
    children,
    domNode
  );
}

// Custom tooltip wrapper to ensure all tooltips get rendered into the portal
function CustomReactTooltip (props) {
  return (
    <BodyPortal>
      <ReactTooltip
        type="light"
        effect="solid"
        delayHide={50}
        {...props}
      />
    </BodyPortal>
  );
}

export default CustomReactTooltip;